/* ==========================================================================
   Tokens — fonte única de cor, tipo, espaço, forma e movimento.
   Nenhum valor visual cru fora deste arquivo (exceto SVGs de conteúdo).
   Faixas responsivas (media queries não aceitam var()):
     mobile  < 40rem (640px)
     tablet  40rem – 63.99rem
     desktop ≥ 64rem (1024px)
   ========================================================================== */

:root {
  /* ---- Cor: marca --------------------------------------------------------
     --color-primary #061A2E: azul-marinho quase-noturno (mais escuro que o
     #09243F do brief). Contraste: 17,57:1 com #FFF · 16,79:1 sobre #F8FAFB. */
  --color-primary: #061A2E;
  --color-primary-raised: #0C2640;   /* cartões sobre seções escuras */
  --color-primary-line: #19375A;     /* bordas sobre escuro */
  --color-on-primary: #FFFFFF;
  --color-on-primary-muted: #9FB4C7; /* 8,22:1 sobre primary · 7,19:1 sobre raised */

  /* Verde/turquesa: SOMENTE conversão, benefícios e palavras-chave. */
  --color-accent: #18C978;           /* fundo de CTA — texto sobre ele: --color-on-accent */
  --color-accent-strong: #079B82;    /* hover de CTA; texto só em tamanho ≥ 24px (3,49:1) */
  --color-accent-ink: #067A67;       /* texto verde em tamanho normal (5,27:1 sobre #FFF) */
  --color-on-accent: var(--color-primary); /* 8,09:1 sobre #18C978 (branco daria 2,17:1) */
  --color-accent-tint: #18C97826;    /* halo de indicador de status */
  --color-accent-wash: #E8F8F0;      /* fundo de destaque suave */
  --color-accent-line: #18C97866;
  --color-accent-deep: #0B3530;      /* cartão de conversão sobre escuro */
  --color-on-accent-deep: #C6E9D9;

  /* Neutros */
  --color-bg: #F8FAFB;
  --color-surface: #FFFFFF;
  --color-text: var(--color-primary);
  --color-text-muted: #61748A;       /* 4,59:1 sobre bg · 4,80:1 sobre surface */
  --color-border: #DDE5EC;
  --color-border-strong: #B9C7D4;

  /* ---- Tipografia -------------------------------------------------------- */
  --font-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  --text-xs: 0.8125rem;   /* 13 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1.0625rem;   /* 17 */
  --text-lg: 1.25rem;     /* 20 */
  --text-xl: 1.5rem;      /* 24 */
  --text-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-h2: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  /* h1 do hero, mobile + tablet (coluna única). A linha mais larga é "Sites e sistemas":
     6,87 × font-size; o tamanho a mantém em ≤ ~85% da coluna (viewport − 32px).
     320px → 34px · 390px → 38px · 480px → 43px · ~700px+ → 56px. Desktop redefine abaixo. */
  --text-h1: clamp(2.125rem, 0.9rem + 6vw, 3.5rem);

  --leading-tight: 1.05; /* h1 do hero (1–2 linhas) */
  --leading-body: 1.65;
  --tracking-display: -0.03em;
  --measure: 34rem;

  /* ---- Espaço ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.75rem;
  --space-9: 3.5rem;
  --section-y: clamp(4rem, 3rem + 3vw, 5.5rem);
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 1.5rem);
  --container: 75rem;

  /* ---- Forma ------------------------------------------------------------- */
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.625rem;
  --radius-pill: 999px;
  --browser-bar: 1.375rem;   /* barra superior das janelas do mockup do hero */
  --browser-dot: 0.4375rem;  /* botões da barra */
  --logo-height: 1.625rem;   /* header/rodapé — ver .brand__image em main.css */

  /* Sombras com deslocamento e desfoque, tingidas pelo primary */
  --shadow-sm: 0 4px 14px -4px #061A2E14;
  --shadow-md: 0 12px 30px -10px #061A2E24;
  --shadow-lg: 0 24px 50px -18px #061A2E40;
  --shadow-window: 0 30px 60px -20px #061A2E66;
  --shadow-cta: 0 12px 26px -10px #079B8299;

  /* ---- Movimento --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 450ms;
  --duration-slow: 650ms;   /* entrada orquestrada do hero ao carregar a página */
  --stagger-step: 90ms;     /* atraso entre cada elemento na entrada do hero */

  /* Marquee da grade de projetos. Velocidade em px/s (número puro): main.js mede a
     distância de uma volta e a duração sai de distância ÷ velocidade, então o ritmo
     não muda com a largura dos cartões ou da tela. Easing linear é obrigatório para o
     loop não "respirar" na emenda. Velocidades diferentes por fileira evitam que os
     cartões das duas fileiras andem em sincronia. */
  --marquee-speed: 24;
  --marquee-speed-reverse: 18;
  --marquee-duration-fallback: 50s;   /* só se o JS não tiver medido a volta ainda */
  --marquee-easing: linear;
  --marquee-gap: 1.125rem;
  --marquee-card-width: clamp(17rem, 12rem + 14vw, 26rem); /* cartões 16:10 (designs desktop) */

  /* ---- Layout de seções ------------------------------------------------- */
  --benefits-max: 60rem;   /* grupo de cards de benefícios, centralizado */
  --header-height: 4.25rem; /* header sticky; o hero ocupa 100svh menos isto */
}

/* Desktop: o hero vira 2 colunas e a coluna do título encolhe (471px em 1024,
   561px a partir de 1200). 1024px → 48px · 1200px+ → 56px: 2 linhas, ~70% da coluna. */
@media (min-width: 64rem) {
  :root { --text-h1: clamp(3rem, 4.55vw + 0.09rem, 3.5rem); }
}