/* ============================================================================
   V12X — Design Tokens
   Fonte única de verdade. Nenhum valor de cor, espaço ou tipo deve existir
   em código de produto fora deste arquivo.

   Arquitetura em duas camadas:
     1. PRIMITIVOS  (--v-ink-900, --v-orange-500)  → a paleta crua, imutável
     2. SEMÂNTICOS  (--v-text, --v-accent)          → o papel, troca por modo

   Componentes SÓ consomem a camada semântica. Se você escreveu
   var(--v-orange-500) num componente, você errou.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. PRIMITIVOS
   Os 12 valores da paleta V12X. Esta lista é fechada — não se adiciona cor.
   ------------------------------------------------------------------------ */
:root {
  /* Neutros escuros */
  --v-ink-900: #151518;   /* quase-preto da marca; cor do wordmark */
  --v-ink-800: #272725;
  --v-ink-700: #40403E;

  /* Neutros médios */
  --v-gray-600: #666663;
  --v-gray-500: #91918D;
  --v-gray-400: #BFBFBA;

  /* Neutros claros */
  --v-gray-200: #E7E7E7;
  --v-gray-100: #F7F7F7;
  --v-white:    #FFFFFF;

  /* Acento — um só */
  --v-orange-500: #FF6E11;  /* O ÚNICO acento do sistema. Preenche, nunca escreve. */

  /* Neutro quente. Não é acento: é fundo de destaque. Nunca texto. */
  --v-sand-300:   #EBDBBC;
}

/* ---------------------------------------------------------------------------
   2. SEMÂNTICOS — MODO CLARO (padrão)

   Contrastes medidos (WCAG 2.1). Todo par texto/fundo aqui passa AA.
     text          #151518 / #FFFFFF  18.22:1  AAA
     text-secondary#666663 / #FFFFFF   5.76:1  AA
     accent-text   #151518 / #FFFFFF  18.22:1  AAA
     on-accent     #151518 / #FF6E11   6.50:1  AA
   ------------------------------------------------------------------------ */
:root {
  --v-bg:            var(--v-white);
  --v-bg-subtle:     var(--v-gray-100);   /* seção alternada */
  --v-bg-sunken:     var(--v-gray-200);   /* rodapé, faixa rebaixada */
  --v-bg-inverse:    var(--v-ink-900);    /* seção-pontuação preta */

  --v-surface:       var(--v-white);
  --v-surface-subtle:var(--v-gray-100);   /* card sobre fundo branco */
  --v-surface-hover: var(--v-gray-200);

  --v-border:        var(--v-gray-200);   /* hairline padrão */
  --v-border-strong: var(--v-gray-400);   /* divisória com peso, régua de tabela */

  --v-text:          var(--v-ink-900);
  --v-text-secondary:var(--v-gray-600);   /* 5.76:1 — o menor texto legível */
  --v-text-tertiary: var(--v-gray-500);   /* 3.16:1 — FALHA AA. Só ≥24px ou não-essencial */
  --v-text-inverse:  var(--v-white);

  --v-accent:        var(--v-orange-500); /* preenchimento, régua, ícone. NUNCA texto. */
  --v-accent-hover:  color-mix(in srgb, var(--v-orange-500) 88%, var(--v-ink-900));
  --v-accent-text:   var(--v-ink-900);    /* texto interativo — 18.22:1 + sublinhado */
  --v-on-accent:     var(--v-ink-900);    /* SEMPRE quase-preto sobre laranja */
  --v-accent-wash:   color-mix(in srgb, var(--v-orange-500) 10%, var(--v-white));

  --v-focus:         var(--v-ink-900);    /* laranja daria 2.80:1 e reprova o mínimo 3:1 */

  /* Onda do hero — textura, nunca informação.
     gray-400 e não gray-200: sobre branco dá 1.85:1, contra 1.75:1 que o
     #40403E entrega sobre #151518 no escuro. Com gray-200 o claro ficava em
     1.24:1 — 71% do peso do escuro, e a assimetria aparecia a olho nu. */
  --v-wave:          var(--v-gray-400);

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   3. SEMÂNTICOS — MODO ESCURO

   A paleta é simétrica: os pares trocam de papel, não de valor.
     #151518 ↔ #FFFFFF  (texto e texto interativo)
     #666663 ↔ #91918D  (texto secundário)
     #FF6E11 ↔ #FF6E11  (o acento não troca — é o mesmo nos dois modos)

   Contrastes medidos:
     text          #FFFFFF / #151518  18.22:1  AAA
     text-secondary#91918D / #151518   5.76:1  AA
     accent-text   #FFFFFF / #151518  18.22:1  AAA
     on-accent     #151518 / #FF6E11   6.50:1  AA  (invariante entre modos)
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v-bg:            var(--v-ink-900);
    --v-bg-subtle:     var(--v-ink-800);
    --v-bg-sunken:     var(--v-ink-800);
    --v-bg-inverse:    var(--v-white);

    --v-surface:       var(--v-ink-800);
    --v-surface-subtle:var(--v-ink-800);
    --v-surface-hover: var(--v-ink-700);

    --v-border:        var(--v-ink-700);
    --v-border-strong: var(--v-gray-600);

    --v-text:          var(--v-white);
    --v-text-secondary:var(--v-gray-500);   /* 5.76:1 */
    --v-text-tertiary: var(--v-gray-600);   /* 3.16:1 — FALHA AA, mesma regra do claro */
    --v-text-inverse:  var(--v-ink-900);

    --v-accent:        var(--v-orange-500);
    --v-accent-hover:  color-mix(in srgb, var(--v-orange-500) 82%, var(--v-white));
    --v-accent-text:   var(--v-white);   /* laranja daria 6.50:1 aqui e passaria,
                                            mas a regra é uma só: laranja não escreve */
    --v-on-accent:     var(--v-ink-900);
    --v-accent-wash:   color-mix(in srgb, var(--v-orange-500) 16%, var(--v-ink-900));

    --v-focus:         var(--v-white);

    --v-wave:          var(--v-ink-700);

    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --v-bg:            var(--v-ink-900);
  --v-bg-subtle:     var(--v-ink-800);
  --v-bg-sunken:     var(--v-ink-800);
  --v-bg-inverse:    var(--v-white);

  --v-surface:       var(--v-ink-800);
  --v-surface-subtle:var(--v-ink-800);
  --v-surface-hover: var(--v-ink-700);

  --v-border:        var(--v-ink-700);
  --v-border-strong: var(--v-gray-600);

  --v-text:          var(--v-white);
  --v-text-secondary:var(--v-gray-500);
  --v-text-tertiary: var(--v-gray-600);
  --v-text-inverse:  var(--v-ink-900);

  --v-accent:        var(--v-orange-500);
  --v-accent-hover:  color-mix(in srgb, var(--v-orange-500) 82%, var(--v-white));
  --v-accent-text:   var(--v-white);
  --v-on-accent:     var(--v-ink-900);
  --v-accent-wash:   color-mix(in srgb, var(--v-orange-500) 16%, var(--v-ink-900));

  --v-focus:         var(--v-white);

  --v-wave:          var(--v-ink-700);

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   4. TIPOGRAFIA

   Inter Tight  → display e títulos. Tracking fechado ecoa a wordmark.
   Inter        → texto corrido, interface, dados.
   Ambas SIL OFL, variable. Nenhuma licença a pagar.

   Regra de tracking: quanto maior o tipo, mais negativo o tracking.
   Texto abaixo de 15px vai a tracking zero ou positivo.
   ------------------------------------------------------------------------ */
:root {
  --v-font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --v-font-text:    "Inter", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --v-font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo,
                    "Roboto Mono", monospace;

  /* Pesos — o sistema usa quatro. Não use 100, 200, 300, 800 ou 900. */
  --v-weight-regular:  400;
  --v-weight-medium:   500;
  --v-weight-semibold: 600;
  --v-weight-bold:     700;

  /* --- Escala display (Inter Tight) — fluida entre 390px e 1440px --- */
  --v-size-d1: clamp(2.75rem, 1.20rem + 6.35vw, 5rem);      /*  44 → 80 */
  --v-size-d2: clamp(2.25rem, 1.22rem + 4.23vw, 3.75rem);   /*  36 → 60 */
  --v-size-d3: clamp(1.875rem, 1.19rem + 2.82vw, 2.875rem); /*  30 → 46 */
  --v-size-d4: clamp(1.625rem, 1.19rem + 1.79vw, 2.25rem);  /*  26 → 36 */

  /* --- Escala título (Inter Tight) --- */
  --v-size-h1: 1.75rem;   /* 28 */
  --v-size-h2: 1.4375rem; /* 23 */
  --v-size-h3: 1.3125rem; /* 21 */

  /* --- Escala texto (Inter) --- */
  --v-size-lead: 1.3125rem; /* 21 — parágrafo de abertura */
  --v-size-body: 1.0625rem; /* 17 — base do sistema */
  --v-size-sm:   0.9375rem; /* 15 — texto denso, tabela, card */
  --v-size-xs:   0.8125rem; /* 13 — legenda, nota de rodapé, nav */
  --v-size-2xs:  0.6875rem; /* 11 — sobrelinha, selo. SEMPRE ≥600 e caixa alta */

  /* --- Entrelinha --- */
  --v-leading-display: 1.06;
  --v-leading-title:   1.18;
  --v-leading-snug:    1.35;
  --v-leading-body:    1.5;
  --v-leading-relaxed: 1.6;

  /* --- Tracking --- */
  --v-tracking-d1:    -0.032em;
  --v-tracking-d2:    -0.028em;
  --v-tracking-d3:    -0.024em;
  --v-tracking-d4:    -0.021em;
  --v-tracking-title: -0.018em;
  --v-tracking-body:  -0.011em;
  --v-tracking-sm:    -0.006em;
  --v-tracking-xs:     0em;
  --v-tracking-caps:   0.075em;  /* sobrelinha em caixa alta */
}

/* ---------------------------------------------------------------------------
   5. ESPAÇO
   Base 4px. A escala é geométrica no topo — não invente valores intermediários.
   ------------------------------------------------------------------------ */
:root {
  --v-space-0:   0;
  --v-space-1:   0.25rem;  /*   4 */
  --v-space-2:   0.5rem;   /*   8 */
  --v-space-3:   0.75rem;  /*  12 */
  --v-space-4:   1rem;     /*  16 */
  --v-space-5:   1.25rem;  /*  20 */
  --v-space-6:   1.5rem;   /*  24 */
  --v-space-8:   2rem;     /*  32 */
  --v-space-10:  2.5rem;   /*  40 */
  --v-space-12:  3rem;     /*  48 */
  --v-space-16:  4rem;     /*  64 */
  --v-space-20:  5rem;     /*  80 */
  --v-space-24:  6rem;     /*  96 */
  --v-space-32:  8rem;     /* 128 */
  --v-space-40:  10rem;    /* 160 */

  /* Ritmo vertical de seção — o espaço É o design.
     Nunca aperte isto para "caber mais conteúdo". Corte conteúdo. */
  --v-section-y:       clamp(4rem, 2.06rem + 7.94vw, 8rem);   /*  64 → 128 */
  --v-section-y-tight: clamp(3rem, 1.97rem + 4.23vw, 5rem);   /*  48 →  80 */
  --v-section-y-loose: clamp(5rem, 1.73rem + 13.4vw, 11.5rem);/*  80 → 184 */
}

/* ---------------------------------------------------------------------------
   6. LAYOUT
   Coluna estreita por padrão. Alinhamento é o traço mais forte do sistema:
   toda seção compartilha a mesma goteira esquerda ou o mesmo eixo central.
   ------------------------------------------------------------------------ */
:root {
  --v-container:       980px;   /* padrão — a coluna da V12X */
  --v-container-wide: 1250px;   /* grades de produto, tabelas largas */
  --v-container-text:  680px;   /* medida de leitura — 60-75 caracteres */
  --v-gutter:          clamp(1.25rem, 0.48rem + 3.17vw, 2.5rem); /* 20 → 40 */
  --v-grid-gap:        var(--v-space-6);
  --v-nav-height:      48px;
}

/* ---------------------------------------------------------------------------
   7. RAIO, TRAÇO E ELEVAÇÃO
   Sombra é exceção. A hierarquia se faz com fundo e hairline, não com blur.
   ------------------------------------------------------------------------ */
:root {
  /* Ícone — Phosphor. Escala alinhada à base de 4px.
     Regular é o padrão; Bold só abaixo de 20px; Fill só em estado ativo. */
  --v-icon-sm:  16px;
  --v-icon-md:  20px;   /* padrão, pareado com o texto de 17px */
  --v-icon-lg:  24px;
  --v-icon-xl:  32px;
  --v-icon-2xl: 48px;

  --v-radius-sm:   6px;
  --v-radius-md:  12px;
  --v-radius-lg:  18px;   /* card padrão */
  --v-radius-xl:  28px;   /* painel grande, hero card */
  --v-radius-pill: 980px;

  --v-hairline: 1px;

  --v-shadow-sm: 0 1px 2px rgba(21, 21, 24, 0.05);
  --v-shadow-md: 0 4px 16px rgba(21, 21, 24, 0.07);
  --v-shadow-lg: 0 12px 40px rgba(21, 21, 24, 0.10);

  --v-focus-ring: 0 0 0 3px color-mix(in srgb, var(--v-focus) 40%, transparent);
  --v-focus-width: 2px;
}

/* ---------------------------------------------------------------------------
   8. MOVIMENTO
   Curto e discreto. Se a animação chama atenção para si, está errada.
   ------------------------------------------------------------------------ */
:root {
  --v-duration-fast: 150ms;
  --v-duration-base: 250ms;
  --v-duration-slow: 400ms;

  --v-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --v-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --v-ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --v-duration-fast: 0.01ms;
    --v-duration-base: 0.01ms;
    --v-duration-slow: 0.01ms;
  }
}

/* ---------------------------------------------------------------------------
   9. CAMADAS
   ------------------------------------------------------------------------ */
:root {
  --v-z-base:     0;
  --v-z-sticky:  100;
  --v-z-nav:     200;
  --v-z-overlay: 300;
  --v-z-modal:   400;
  --v-z-toast:   500;
}