/* Tokens da vitrine: toda cor, medida, fonte, sombra e tempo usados nos componentes saem daqui. */
:root {
  /* Cores. O fundo é branco para as miniaturas aparecerem; o azul da SolvTI fica só no que é ação. */
  --color-paper: #ffffff;
  --color-ink: #090b12; /* o mesmo tom do texto da logo */
  --color-ink-muted: #4f5665; /* 7,4:1 sobre o branco */
  --color-line: #e4e7ec; /* bordas que só separam: cards, divisórias */
  --color-line-strong: #c9ced6; /* borda de pílula e da etiqueta de código */
  --color-line-control: #8a91a0; /* borda de campo e de select: 3,2:1, o mínimo para componente */
  --color-mist: #f3f4f7; /* superfícies discretas: selos de segmento, skeleton, hover */
  --color-mist-strong: #e8eaef; /* o brilho que passa no skeleton */
  --color-primary: #0554f2; /* contato, foco e pílula ativa; branco sobre ele: 5,9:1 */
  --color-primary-hover: #0447cf;
  --color-on-primary: #ffffff;
  --color-danger: #b42318;
  --color-whatsapp: #25d366; /* só no ícone do rodapé; o número ao lado continua na cor do texto */
  /* Selos de tema, como na galeria de referência (seção 2.3 do briefing). */
  --color-badge-dark-bg: #18181b;
  --color-badge-dark-text: #ffffff;
  --color-badge-light-bg: #e4f0ff;
  --color-badge-light-text: #1d4ed8;

  /* Tipografia: títulos em Familjen Grotesk, texto em Atkinson Hyperlegible Next, códigos em Atkinson Hyperlegible Mono. */
  --font-text: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-title: 'Familjen Grotesk', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --text-xs: 0.75rem; /* 12 px */
  --text-sm: 0.8125rem; /* 13 px */
  --text-md: 0.875rem; /* 14 px */
  --text-base: 1rem; /* 16 px */
  --text-lg: 1.125rem; /* 18 px */
  --text-xl: 1.25rem; /* 20 px */
  --text-display: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-caps: 0.06em;
  --tracking-code: 0.04em;
  --tracking-display: -0.02em;

  /* Espaçamento, na escala de 4 px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Raios. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Sombras: bem leves no repouso; a elevação só aparece no hover. */
  --shadow-card: 0 1px 2px rgb(9 11 18 / 0.04);
  --shadow-card-hover: 0 14px 30px -14px rgb(9 11 18 / 0.25);
  --shadow-tooltip: 0 6px 16px -6px rgb(9 11 18 / 0.35);

  /* Foco: anel azul afastado do elemento, visível sobre fundo branco e sobre o azul. */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Camadas. */
  --z-sticky: 10;
  --z-header: 20;
  --z-tooltip: 30;

  /* Movimento. */
  --duration-fast: 120ms;
  --duration: 200ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Medidas de layout e de controles. */
  --container-max: 1760px;
  --gutter: var(--space-4);
  --header-height: 4rem;
  --control-height: 2.5rem;
  --pill-height: 2.125rem;
  --icon-size: 1.125rem;
}