/* ==========================================================================
   Kabine — Design tokens
   Contrato do sistema. Nenhum valor bruto (cor, tamanho, espaço) deve
   aparecer fora deste arquivo: tudo é consumido via custom property.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- MARCA
     #FE0100 rende apenas 4,03:1 contra branco. Como "texto grande" em AA
     começa em 18,66px/700 (ou 24px normal), um rótulo de botão de 17px
     REPROVA sobre o vermelho puro. Por isso o preenchimento de botão é o
     --brand-600 (5,28:1 com branco) e o #FE0100 fica reservado para o
     logo, blocos chapados grandes, ícones e réguas — onde vale a regra de
     3:1 de componente, não a de texto. */
  --brand-50:  #FFF1F0;
  --brand-100: #FFDEDB;
  --brand-200: #FFBDB8;
  --brand-300: #FF8A82;
  --brand-400: #FF4C40;  /* acento sobre escuro */
  --brand-500: #FE0100;  /* MARCA — fills, logo, blocos chapados */
  --brand-600: #D90600;  /* texto vermelho sobre claro (AA) */
  --brand-700: #B00400;  /* hover de CTA */
  --brand-800: #7A0400;

  /* ------------------------------------------------ NEUTROS (grafite frio) */
  --ink-950: #0B0D0F;
  --ink-900: #14171A;
  --ink-800: #1E2226;
  --ink-700: #2C3136;
  --ink-600: #454B52;
  --ink-500: #646B73;  /* texto secundário sobre claro — 5,40:1 */
  --ink-400: #8B9299;  /* apenas decorativo — reprova como texto */
  --ink-300: #B7BDC3;
  --ink-200: #D8DCE0;
  --ink-100: #EBEEF0;
  --ink-50:  #F5F7F8;
  --paper:   #FFFFFF;
  --canvas:  #F7F8F9;

  /* ------------------------------------------------- SUPERFÍCIES NO ESCURO */
  --dark-bg:      #0B0D0F;
  --dark-surface: #15181B;
  --dark-surface-2: #1B1F23;
  --dark-border:  #262B30;
  --dark-border-strong: #343A40;
  --dark-text:    #F5F7F8;
  --dark-muted:   #9AA2A9;
  --dark-faint:   #7E868D;

  /* ------------------------------------------------------------- APOIO */
  --success:  #10864F;
  --warn:     #B4690E;
  --tint-red: #FFF5F4;

  /* -------------------------------------------------------- TIPOGRAFIA */
  /* Uma família só, como a referência. Os três nomes continuam existindo
     porque expressam papéis diferentes, mas apontam para a mesma pilha. */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-data:    var(--font-sans);   /* dados tabulares: muda só o variant numérico */

  /* Escala medida na referência: 36>72, 30>48, 28>36, 18, 16>20, 16, 14, 12. */
  --fs-display-xl: clamp(2.25rem,  0.356rem + 4.74vw, 4.5rem);   /* 36 > 72 */
  --fs-display-l:  clamp(1.875rem, 0.925rem + 2.37vw, 3rem);     /* 30 > 48 */
  --fs-display-m:  clamp(1.75rem,  1.331rem + 1.05vw, 2.25rem);  /* 28 > 36 */
  --fs-h4:         1.125rem;                                     /* 18 */
  --fs-eyebrow:    0.75rem;                                      /* 12 */
  --fs-lead:       clamp(1rem,     0.788rem + 0.53vw, 1.25rem);  /* 16 > 20 */
  --fs-body:       1rem;
  --fs-sm:         0.875rem;
  --fs-caption:    0.75rem;

  --lh-display-xl: 1.10;
  --lh-display-l:  1.05;
  --lh-display-m:  1.11;
  --lh-tight:      1.63;   /* título de card em 18px */
  --lh-body:       1.50;
  --lh-snug:       1.43;

  /* Tracking negativo uniforme acima de 18px é o que dá o aperto da
     referência; o eyebrow vai para o extremo oposto, 0.20em. */
  --tr-display-xl: -0.025em;
  --tr-display-l:  -0.025em;
  --tr-display-m:  -0.025em;
  --tr-h4:         -0.025em;
  --tr-eyebrow:     0.20em;

  /* Pesos: a referência nunca usa 700 em display. */
  --w-display-xl: 500;
  --w-display:    600;
  --w-card:       500;

  /* --------------------------------------------------------- ESPAÇAMENTO */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px; --sp-11: 160px;

  --container:      1200px;
  --container-wide: 1320px;
  --container-prose: 68ch;
  --gutter:    clamp(16px, 4vw, 32px);
  --section-y:    clamp(72px, 8vw, 112px);    /* padrão */
  --section-y-lg: clamp(96px, 10vw, 144px);   /* planos: +32px, como a referência */
  --grid-gap:  24px;


  /* --------------------------------------------------------------- FORMA */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgb(11 13 15 / .04), 0 8px 24px -12px rgb(11 13 15 / .10);
  --shadow-pop:  0 2px 4px rgb(11 13 15 / .06), 0 24px 48px -20px rgb(11 13 15 / .18);

  /* ------------------------------------------------------------- MOVIMENTO */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);   /* o mesmo da navbar de referência */
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 380ms;

  /* ---------------------------------------------------------------- NAVBAR */
  --nav-h:        70px;
  --nav-top:      8px;
  --nav-w-open:   1152px;   /* estado topo */
  --nav-w-stuck:  896px;    /* estado rolado */
  --nav-px-open:  48px;
  --nav-px-stuck: 20px;
  --nav-bg:       rgb(240 240 240 / .6);
  --nav-border:   #E2E4E8;
  --nav-blur:     blur(40px);
  --nav-radius:   24px;

  /* ----------------------------------------------------------------- Z */
  --z-nav: 100;
  --z-menu: 200;
}

/* ==========================================================================
   Tokens semânticos
   Cada seção declara seu tema; os componentes leem apenas estes nomes e se
   adaptam sozinhos. Nenhum componente conhece "claro" ou "escuro".
   ========================================================================== */

:root,
.theme-light {
  --bg:            var(--paper);
  --bg-alt:        var(--canvas);
  --surface:       var(--paper);
  --surface-2:     var(--ink-50);
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --text:          var(--ink-950);
  --text-muted:    var(--ink-500);
  --text-faint:    #5F666D;
  --accent:        var(--brand-600);
  --accent-fill:   var(--brand-600);
  --accent-hover:  var(--brand-700);
  --on-accent:     #FFFFFF;
  --dim:           #7E868D;   /* cinza do trecho esmaecido do título */
  --ghost-border:  var(--ink-200);
  --ghost-hover:   var(--ink-50);
}

.theme-dark {
  --bg:            var(--dark-bg);
  --bg-alt:        var(--ink-900);
  --surface:       var(--dark-surface);
  --surface-2:     var(--dark-surface-2);
  --border:        var(--dark-border);
  --border-strong: var(--dark-border-strong);
  --text:          var(--dark-text);
  --text-muted:    var(--dark-muted);
  --text-faint:    var(--dark-faint);
  --accent:        var(--brand-400);
  --accent-fill:   var(--brand-600);
  --accent-hover:  var(--brand-700);
  --on-accent:     #FFFFFF;
  --dim:           #6E767D;
  --ghost-border:  var(--dark-border-strong);
  --ghost-hover:   var(--dark-surface-2);
}

/* Bloco vermelho chapado do CTA final. */
.theme-brand {
  --bg:            var(--brand-500);
  --bg-alt:        var(--brand-500);
  --surface:       rgb(255 255 255 / .12);
  --surface-2:     rgb(255 255 255 / .18);
  --border:        rgb(255 255 255 / .28);
  --border-strong: rgb(255 255 255 / .45);
  /* Branco sobre #FE0100 rende 4,03:1: passa em AA só como texto grande.
     Por isso aqui não existe cinza de apoio — qualquer tom esmaecido cairia
     para ~3:1. O texto do bloco vermelho é branco puro e grande. */
  --text:          #FFFFFF;
  --text-muted:    #FFFFFF;
  --text-faint:    rgb(255 255 255 / .72);
  --dim:           #FFFFFF;
  --accent:        #FFFFFF;
  --accent-fill:   #FFFFFF;
  --accent-hover:  var(--brand-50);
  --on-accent:     var(--brand-700);
  --ghost-border:  rgb(255 255 255 / .45);
  --ghost-hover:   rgb(255 255 255 / .12);
}