/* ==========================================================================
   Velocity — tokens.css
   Espaçamento, raio, elevação, glows ambiente, grade, movimento e camadas.
   Carregue SEMPRE depois de colors_and_type.css.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. Espaçamento — base 4px, ritmo real de 8px.
        As pranchas alternam densidade: bloco compacto (16–24) seguido de
        respiro grande (80–160). Não use passos intermediários inventados.
     --------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;
  --space-40: 160px;

  /* Espaço entre seções: o material principal da marca. */
  --section-gap: clamp(80px, 12vw, 160px);
  --card-pad: var(--space-6);
  --card-pad-lg: var(--space-8);

  /* ---------------------------------------------------------------------
     2. Raio — cantos generosos, hairlines finas.
     --------------------------------------------------------------------- */
  --radius-sm:   10px;  /* botão, ícone-botão, tab numerada        */
  --radius:      16px;  /* card padrão                             */
  --radius-lg:   20px;  /* painel-herói, card de gráfico grande    */
  --radius-pill: 999px; /* pill de seção, chip de dado             */

  /* ---------------------------------------------------------------------
     3. Elevação — profundidade vem de sombra difusa, nunca de borda pesada.
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .04);
  --shadow:    0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -12px rgb(0 0 0 / .12);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / .05), 0 28px 64px -20px rgb(0 0 0 / .16);
  --hairline:  1px solid var(--border);

  /* ---------------------------------------------------------------------
     4. Glow ambiente — o ÚNICO gradiente da marca.
        Radial, lima↔periwinkle, opacidade sempre < 0.12, ancorado num canto.
     --------------------------------------------------------------------- */
  --glow-lime: radial-gradient(
    70% 70% at 100% 100%,
    color-mix(in oklch, var(--accent) 9%, transparent) 0%,
    transparent 55%
  );
  --glow-hero: radial-gradient(
    70% 70% at 0% 100%,
    color-mix(in oklch, var(--hero) 9%, transparent) 0%,
    transparent 55%
  );
  --glow-ambient: var(--glow-lime), var(--glow-hero);

  /* ---------------------------------------------------------------------
     5. Grade e medida
     --------------------------------------------------------------------- */
  --grid-cols: 12;
  --grid-gutter: var(--space-6);
  --container: 1240px;
  --container-narrow: 760px;
  --measure: 62ch;

  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;

  /* ---------------------------------------------------------------------
     6. Movimento — DERIVADO, não observado (as pranchas são estáticas).
        Postura: curto, sem bounce, uma propriedade por vez.
     --------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --dur-instant: 90ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;   /* só para contagem de números e arcos de gauge */

  --transition-control: color var(--dur-fast) var(--ease-standard),
                        background-color var(--dur-fast) var(--ease-standard),
                        border-color var(--dur-fast) var(--ease-standard),
                        box-shadow var(--dur-base) var(--ease-standard);

  /* ---------------------------------------------------------------------
     7. Camadas
     --------------------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-dialog: 60;
  --z-toast: 80;

  /* Alvo de toque mínimo. */
  --hit: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}

/* --------------------------------------------------------------------------
   Tema escuro — elevação.

   Sombra preta sobre canvas preto não existe. No escuro a elevação vem de
   uma hairline interna clara somada a uma sombra mais profunda: o card
   ganha aresta, não halo. Regra do sistema preservada — hairline OU
   sombra com peso, nunca as duas competindo.
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --shadow-sm: inset 0 0 0 1px rgb(255 255 255 / .05);
  --shadow:    inset 0 0 0 1px rgb(255 255 255 / .06), 0 12px 32px -12px rgb(0 0 0 / .70);
  --shadow-lg: inset 0 0 0 1px rgb(255 255 255 / .07), 0 28px 64px -20px rgb(0 0 0 / .80);
}