/* ==========================================================================
   design-tokens.css — Fase 1
   Sistema destilado das medições da Fase 0 (referencia/*.json).
   Todo valor aqui foi medido no original (getComputedStyle, CSS servido ou
   código dos componentes); as consolidações estão em RELATORIO.md › Fase 1.
   Cores nomeadas por função: os temas [data-theme] remapeiam as funções.
   ========================================================================== */

/* ---- Cor: funções do tema claro ------------------------------------------
   Padrão do documento e também um tema explícito: uma seção clara dentro de
   uma página escura precisa redeclarar os valores, senão herda os escuros. */
:root,
[data-theme="light"] {
  --color-bg:            #eeeeee;
  --color-bg-muted:      #f7f7f7;
  --color-surface:       #d5d5d5;
  --color-brand:         #fb460d;
  --color-brand-muted:   #fd8d68;
  --color-text:          #141314;
  --color-text-muted:    #696869;
  --color-border:        #00000033;
  --color-border-muted:  #0000001a;
  --color-selection-bg:   #fb460d;
  --color-selection-text: #eeeeee;
}

:root {
  /* ---- Cor: constantes (não mudam com o tema) ---------------------------- */
  --color-ink:   #141314;
  --color-paper: #eeeeee;
  --color-danger: #ff0000;                          /* erros de campo: text-[red] */

  /* Véus sobre imagem/página: sempre a partir da tinta, independem do tema */
  --color-overlay:     color-mix(in oklab, var(--color-ink) 30%, transparent);
  --color-shade:       color-mix(in oklab, var(--color-ink) 50%, transparent);  /* degradê do topo do hero do Sobre */
  --color-scrim:       color-mix(in oklab, var(--color-ink) 60%, transparent);

  /* ---- Tipografia --------------------------------------------------------- */
  /* Medido: aktiv-grotesk (Adobe Fonts, kit restrito ao domínio do original).
     Decisão do cliente: Onest (OFL, self-hosted em /fonts) no lugar dela,
     mesma escala e mesmos pesos (300/400/500/700). */
  --font-heading: "Onest", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Onest", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "Fira Code", monospace;

  /* Escala fluida: interpola entre viewport 375px e 1600px, trava nas pontas.
     tamanho = min + (max - min) × (100vw - 375px) / 1225 */
  --fluid: calc((100vw - 375px) / 1225);

  --text-2xs:  10px;                                                    /* rótulo de tabela (mono) */
  --text-xs:   clamp(12px, calc(12px + 2 * var(--fluid)), 14px);        /* mono pequeno */
  --text-sm:   14px;                                                    /* corpo pequeno, botão */
  --text-md:   clamp(14px, calc(14px + 2 * var(--fluid)), 16px);        /* mono padrão (menu, rótulos) */
  --text-base: 16px;                                                    /* corpo */
  --text-lg:   clamp(18px, calc(18px + 2 * var(--fluid)), 20px);        /* corpo grande, mono grande */
  --text-xl:   20px;                                                    /* título h5 */
  --text-2xl:  clamp(20px, calc(20px + 4 * var(--fluid)), 24px);        /* subtítulo */
  --text-3xl:  clamp(28px, calc(28px + 4 * var(--fluid)), 32px);        /* título h4 */
  --text-4xl:  clamp(28px, calc(28px + 20 * var(--fluid)), 48px);       /* título h3 */
  --text-5xl:  clamp(36px, calc(36px + 28 * var(--fluid)), 64px);       /* título de seção (h2) */
  --text-6xl:  clamp(32px, calc(32px + 64 * var(--fluid)), 96px);       /* título de página (h1) */
  --text-7xl:  clamp(48px, calc(48px + 80 * var(--fluid)), 128px);      /* display */

  --weight-light:  300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  /* Entrelinhas sem consolidação: qualquer arredondamento desloca o fluxo
     vertical (h2 1.125→1.1 = 1,5px por linha a 1440) — ver RELATORIO.md */
  --leading-none:     1;
  --leading-tightest: 1.083;
  --leading-tighter:  1.1;
  --leading-tight:    1.125;
  --leading-snug:     1.25;
  --leading-cozy:     1.333;
  --leading-normal:   1.4;
  --leading-comfy:    1.43;
  --leading-relaxed:  1.5;
  --leading-loose:    1.6;

  --tracking-tightest: -0.05em;
  --tracking-tighter:  -0.035em;
  --tracking-tight:    -0.025em;
  --tracking-mono:     -0.02em;    /* rótulos mono em caixa alta */
  --tracking-wide:      0.025em;

  /* ---- Espaçamento (px) --------------------------------------------------- */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-11:  44px;
  --space-12:  48px;
  --space-13:  52px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;
  --space-48:  192px;

  --section-y:         var(--space-16);   /* 64 → 128 em ≥1024 */
  --section-y-compact: var(--space-16);   /* 64 → 96  em ≥1024 */
  --section-y-hero:    var(--space-24);   /* 96 → 192 em ≥1024 (topo de páginas internas) */
  --section-y-text:    var(--space-20);   /* 80 → 160 em ≥1024 (páginas legais) */
  --section-y-sm:      var(--space-8);    /* 32 → 64  em ≥1024 (modalidades) */
  --section-y-md:      var(--space-12);   /* 48 → 96  em ≥1024 (topo da faixa de logos) */
  --section-y-xs:      var(--space-4);    /* 16 → 32  em ≥1024 (base da faixa de logos) */

  /* ---- Layout ------------------------------------------------------------- */
  --container-max: 1920px;
  --container-pad: var(--space-4);        /* 16 → 24 (≥640) → 32 (≥1024) */
  --grid-columns:  12;
  --grid-gap:      var(--space-4);
  --header-h:      104px;
  --footer-meta-offset: 12.5%;            /* recuo do bloco © do footer, proporcional à largura */

  /* Breakpoints (media queries não leem variáveis; espelhados aqui para JS):
     sm 640 · md 768 · lg 1024 · faixa fluida da tipografia 375–1600 */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* ---- Forma -------------------------------------------------------------- */
  /* Medido: nenhum raio além de pílulas/pontos; nenhuma sombra no site inteiro.
     Os slots radius-sm/md/lg e shadow-* do modelo não têm valor medido. */
  --radius-none: 0;
  --radius-full: 9999px;

  --blur-backdrop: 8px;
  --border-width:  1px;

  --opacity-ghost:    0.1;   /* assinatura gigante do footer */
  --opacity-faint:    0.4;   /* passo inativo, atalhos, pulso */
  --opacity-disabled: 0.5;
  --opacity-soft:     0.6;   /* nota da newsletter */
  --opacity-hover:    0.7;

  /* ---- Componentes (medidas de anatomia) ---------------------------------- */
  --size-dot:       var(--space-1);    /* marcador redondo das listas legais */
  --size-marker-sm: var(--space-2);    /* quadrado de status */
  --size-marker:    var(--space-3);    /* quadrado de destaque */
  --size-icon:      var(--space-4);
  --size-thumb:     var(--space-32);   /* miniatura 16:9 */

  --btn-h:    var(--space-8);          /* 32 → 40 em ≥1024 */
  --btn-h-lg: var(--space-10);         /* 40 → 48 em ≥1024 */
  --btn-h-xl: var(--space-12);
  --btn-px:   var(--space-2);          /* 8 → 12 em ≥1024 */
  --btn-px-lg: var(--space-4);
  --btn-gap:  var(--space-1-5);
  --input-h:  var(--space-10);

  --icon-glyph:   0.75em;              /* seta dentro do quadrado do botão */
  --mask-bleed:   0.1em;               /* sobra dos blocos de revelação de título */
  --menu-label-w: 3.5em;

  --ratio-portrait: 4 / 5;
  --ratio-photo:    3 / 4;             /* foto vertical da faixa de números */
  --ratio-person:   2 / 3;             /* retrato (Sobre) */
  --ratio-card:     16 / 10;
  --ratio-thumb:    16 / 9;

  --measure:      36rem;               /* parágrafo do hero / about */
  --measure-wide: 42rem;               /* parágrafo de hero centralizado */
  --measure-part: 66.6667%;            /* resposta do FAQ, texto dos diferenciais */

  --stat-min-h:  250px;                /* 250 → 450 em ≥1024 */
  --media-min-h: 300px;                /* 300 → 450 em ≥1024 */
  --tier-min-h:  600px;
  --split-min-h: 750px;                /* contato em ≥1024 */
  --pin-h:       320vh;                /* processo pinado */
  --about-hero-h: 100svh;              /* 100svh → 150vh em ≥1024 */
  --hero-visual-top: 35%;              /* arte do hero no mobile */
  --hero-visual-w:   90%;
  --logo-h:      var(--space-6);       /* faixa de logos: 24 → 32 em ≥640 */
  --logo-h-sm:   var(--space-4);       /* logos baixos: 16 → 20 em ≥640 */
  --teaser-w:    120px;                /* miniatura do teaser do hero */
  --intro-delay: 800ms;                /* loader aparece */
  --intro-hold:  2200ms;               /* quadrado sai */
  --step-shift:  var(--space-12);      /* passo ativo desliza 48px */
  --steps-ratio: 1.1;                  /* coluna da lista × coluna da imagem */
  --steps-gutter: 10%;
  --dot-offset:  0.5em;
  --zoom-scale:  1.075;                /* imagem no hover */
  --turn-eighth:  45deg;
  --turn-quarter: 90deg;
  --turn-half:    180deg;
  --transition-size: 200vmax;          /* quadrado da transição de página */
  --loader-offset: 110%;

  /* ---- Camadas ------------------------------------------------------------ */
  --z-content:    1;
  --z-raised:     10;
  --z-float:      20;
  --z-overlay:    30;
  --z-popover:    50;
  --z-veil:       9997;   /* véu de blur da transição */
  --z-backdrop:   9998;   /* fundo do menu */
  --z-header:     9999;   /* header e cursor */
  --z-transition: 10000;  /* header durante a transição */

  /* ---- Movimento ---------------------------------------------------------- */
  --ease:              cubic-bezier(0.4, 0, 0.2, 1);      /* cor/opacidade */
  --ease-in-out:       cubic-bezier(0.42, 0, 0.58, 1);    /* pulso (palavra-chave ease-in-out) */
  --ease-out:          cubic-bezier(0, 0, 0.2, 1);        /* header, inputs, backdrop */
  --ease-out-cubic:    cubic-bezier(0.33, 1, 0.68, 1);    /* deslize de título/rótulo no hover, fade de entrada */
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);     /* zoom de imagem */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);     /* cursor */
  --ease-out-back:     cubic-bezier(0.34, 1.56, 0.64, 1); /* header */
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);    /* transição de página, máscaras */
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);    /* seta e texto dos botões */
  --ease-loader:       cubic-bezier(0.215, 0.61, 0.355, 1); /* quadrados do loader */
  --ease-expressive:   cubic-bezier(0.625, 0.05, 0, 1);   /* sublinhado de link */

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-mid:  500ms;
  --duration-slow: 700ms;
  --duration-page: 1000ms;
  --duration-hold: 600ms;   /* quadrado parado cobrindo a tela */
  --duration-pulse: 2000ms;
  --duration-count: 1800ms;    /* odômetro dos números */
  --duration-scramble: 400ms;  /* texto que se resolve caractere a caractere */
  --duration-grid: 1500ms;     /* grade do atalho ⌘G */
  --stagger:    100ms;         /* linhas de título, links do menu */
  --stagger-sm: 30ms;          /* linhas de parágrafo, colunas da grade */
  --footer-parallax: 20%;      /* footer sobe de -20% até 0 na última tela */
  --duration-instant: 0.01ms;  /* prefers-reduced-motion */
  --delay-page-exit: 100ms;
  --delay-underline: 300ms;

  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
}

@media (min-width: 640px) {
  :root {
    --container-pad: var(--space-6);
    --logo-h:    var(--space-8);
    --logo-h-sm: var(--space-5);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad:     var(--space-8);
    --section-y:         var(--space-32);
    --section-y-compact: var(--space-24);
    --section-y-hero:    var(--space-48);
    --section-y-text:    var(--space-40);
    --section-y-sm:      var(--space-16);
    --section-y-md:      var(--space-24);
    --section-y-xs:      var(--space-8);
    --btn-h:       var(--space-10);
    --btn-h-lg:    var(--space-12);
    --btn-px:      var(--space-3);
    --stat-min-h:  450px;
    --media-min-h: 450px;
    --about-hero-h: 150vh;
  }
}

/* ---- Cores derivadas -----------------------------------------------------
   Declaradas em cada escopo de tema: uma variável que lê outra é resolvida
   onde é declarada, então no :root ela ficaria presa ao tema claro. */
:root,
[data-theme] {
  --color-brand-hover: var(--color-brand-muted);                              /* botão primary: hover:bg-brand-muted */
  --color-brand-text:  var(--color-brand);                                    /* marca usada como texto pequeno */
  --color-success:     var(--color-brand);                                    /* o "Message sent" usa a cor da marca */
  --color-hairline:    color-mix(in oklab, var(--color-text) 10%, transparent); /* linhas de lista, FAQ */
  --color-text-subtle: color-mix(in oklab, var(--color-text) 40%, transparent);
  --color-brand-wash:  color-mix(in oklab, var(--color-brand) 6%, transparent);  /* hover dos cards de número */
  --color-focus:       color-mix(in oklab, var(--color-brand) 50%, transparent); /* ring-brand/50 */
  --color-bg-veil:     color-mix(in oklab, var(--color-bg) 10%, transparent);    /* véu sobre foto de fundo */
}

/* ---- Temas: remapeiam só as funções de cor ------------------------------ */
[data-theme="dark"] {
  --color-bg:            #141314;
  --color-bg-muted:      #1a1a1a;
  --color-surface:       #333333;
  --color-brand:         #fd551d;
  --color-brand-muted:   #fd8d68;
  --color-text:          #eeeeee;
  --color-text-muted:    #818081;
  --color-border:        #eeeeee1a;
  --color-border-muted:  #eeeeee0d;
  --color-selection-bg:   #fd551d;
  --color-selection-text: #141314;
}

[data-theme="brand"] {
  --color-bg:            #fb460d;
  --color-bg-muted:      #fd7142;
  --color-surface:       #fd8d68;
  --color-brand:         #fd551d;
  --color-brand-muted:   #fd8d68;
  --color-text:          #141314;
  --color-text-muted:    #1a1a1a;
  --color-border:        #0000004d;
  --color-border-muted:  #00000033;
  --color-selection-bg:   #eeeeee;
  --color-selection-text: #141314;
}