/* tokens.css — design tokens centralizados
 * Paleta extraída da identidade visual real: vermelho metálico + preto industrial
 * Trocar marca = editar apenas este arquivo (regra do design-system v6)
 */
@layer tokens {
  :root {
    /* ===== Surfaces — black industrial ===== */
    --bg:        #08090b;
    --bg-elev:   #0f1114;
    --bg-card:   #14171b;
    --bg-line:   #20242b;
    --bg-deep:   #050608;

    --fg:        #f4f5f7;
    --fg-muted:  color-mix(in oklab, var(--fg) 68%, transparent);
    --fg-dim:    color-mix(in oklab, var(--fg) 50%, transparent); /* v23: 42%→50% — labels 0.78rem passam de 3.79:1 para 4.9:1 (AA) */
    --fg-faint:  color-mix(in oklab, var(--fg) 22%, transparent);

    /* ===== Brand — vermelho metálico, não berrante ===== */
    --brand:       #e3122f;
    --brand-hot:   #ff2740;
    --brand-deep:  #a30b1f;
    --brand-soft:  #6b0613;
    --brand-glow:  color-mix(in oklab, var(--brand) 55%, transparent);
    --brand-faint: color-mix(in oklab, var(--brand) 18%, transparent);

    --warn:     #f7a544;
    --success:  #2ec27e;
    --whatsapp: #25d366;

    /* ===== Tipografia ===== */
    --font-display: "Bricolage Grotesque", "Cabinet Grotesk", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.82rem);
    --fs-sm:   clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem);
    --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    --fs-md:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
    --fs-lg:   clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
    --fs-xl:   clamp(1.625rem, 1.4rem + 1.1vw, 2.125rem);
    --fs-2xl:  clamp(2.125rem, 1.8rem + 1.5vw, 2.875rem);
    --fs-3xl:  clamp(2.875rem, 2.3rem + 2.8vw, 4.5rem);
    --fs-4xl:  clamp(3.5rem, 2.8rem + 3.5vw, 5.5rem);

    /* ===== Spacing — 8px grid rígido ===== */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-7:  3rem;
    --sp-8:  4rem;
    --sp-9:  6rem;
    --sp-10: 8rem;

    /* ===== Radius ===== */
    --r-sm:   6px;
    --r-md:   12px;
    --r-lg:   20px;
    --r-xl:   28px;
    --r-pill: 9999px;

    /* ===== Animation tokens (consumidos por animations.css e animation-menu) ===== */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --dur-fast: 180ms;
    --dur-base: 280ms;
    --dur-slow: 600ms;

    /* ===== Shadows ===== */
    --shadow-sm:    0 4px 16px -8px rgba(0, 0, 0, 0.6);
    --shadow-md:    0 12px 32px -12px rgba(0, 0, 0, 0.55);
    --shadow-lg:    0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --shadow-brand: 0 14px 48px -12px var(--brand-glow);
    --shadow-inset: inset 0 1px 0 0 color-mix(in oklab, var(--fg) 8%, transparent);

    /* ===== Layout ===== */
    --container:       1240px;
    --container-tight: 920px;
    --header-h:        76px;
    --header-h-scrl:   64px;
  }

  /* Tema claro — funcional, não decorativo */
  [data-theme="light"] {
    --bg:        #fafafa;
    --bg-elev:   #ffffff;
    --bg-card:   #f3f4f6;
    --bg-line:   #e4e6ea;
    --bg-deep:   #ededed;
    --fg:        #0c0d10;
    --fg-muted:  color-mix(in oklab, var(--fg) 70%, transparent);
    --fg-dim:    color-mix(in oklab, var(--fg) 58%, transparent); /* v23: 45%→58% — AA no tema claro */
    --fg-faint:  color-mix(in oklab, var(--fg) 22%, transparent);
    --brand:       #c10a22;
    --brand-hot:   #e3122f;
    --brand-deep:  #7c0617;
    --brand-soft:  #fbe3e6;
    --brand-glow:  color-mix(in oklab, var(--brand) 28%, transparent);
    --brand-faint: color-mix(in oklab, var(--brand) 10%, transparent);
    --shadow-sm: 0 4px 16px -8px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.14);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.18);
  }

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