/* ============================================================
   tokens.css — Dark luxury + acento elétrico. Serif × grotesk.
   Cores semânticas (--t-*) que cada seção sobrescreve → as
   seções "quebram por cor" mantendo os componentes coerentes.
   ============================================================ */

:root {
  /* ---- Fontes ---- */
  --font-grotesk: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: var(--font-grotesk); /* nome/títulos agora em Space Grotesk (escolha do Victor) */

  /* ---- Paleta base ---- */
  --bg: #0c0b0f;            /* preto quente — base global */
  --bg-graphite: #16141c;
  --bg-plum: #190f24;
  --bg-indigo: #0f1026;
  --cream: #f4eee4;         /* respiro claro */
  --cream-ink: #1a1620;

  --ink: #f5f1ea;           /* texto em fundo escuro */
  --ink-dim: #a8a1b2;
  --ink-faint: #726c7e;

  /* Acento elétrico (violeta) — links, CTAs, destaques */
  --accent: #7c5cff;
  --accent-bright: #a48dff;
  --accent-deep: #5b3ee0;
  --accent-2: #36e0c4;      /* secundário (raro, p/ grafismo) */

  /* ---- Tokens semânticos (default = tema escuro) ---- */
  --t-primary: var(--ink);
  --t-secondary: var(--ink-dim);
  --t-tertiary: var(--ink-faint);
  --t-line: rgba(255, 255, 255, 0.12);
  --t-line-strong: rgba(255, 255, 255, 0.22);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-line: rgba(255, 255, 255, 0.12);
  --section-bg: var(--bg);

  /* ---- Aliases (usados pelos componentes; resolvem os --t-* no cascateamento) ---- */
  --color-text-primary: var(--t-primary);
  --color-text-secondary: var(--t-secondary);
  --color-text-tertiary: var(--t-tertiary);
  --color-divider: var(--t-line);
  --color-divider-strong: var(--t-line-strong);
  --color-bg: var(--section-bg);
  --color-bg-subtle: var(--surface);
  --color-bg-elevated: var(--surface);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-bright);
  --color-accent-active: var(--accent-deep);
  --color-dark-text: var(--ink);
  --color-dark-text-secondary: var(--ink-dim);
  --color-dark-text-tertiary: var(--ink-faint);
  --color-dark-surface: var(--surface);
  --color-dark-surface-border: var(--surface-line);

  /* ---- Tipografia (escala) ---- */
  --text-eyebrow: 0.8125rem;
  --text-small: 0.9375rem;
  --text-body: 1.125rem;
  --text-lead: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  --text-statement: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  --text-h2: clamp(2.25rem, 1.3rem + 3.8vw, 4.25rem);
  --text-display: clamp(3rem, 1.1rem + 8vw, 7.5rem);
  --text-hero-promise: clamp(1.0625rem, 0.95rem + 0.7vw, 1.375rem);
  --text-kpi: clamp(2.75rem, 1.7rem + 3.4vw, 4.75rem);
  --text-subhead: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-display: -0.01em;
  --tracking-tight: -0.015em;
  --tracking-grotesk: -0.02em;
  --tracking-eyebrow: 0.04em;

  --leading-display: 0.98;
  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.5;
  --leading-relaxed: 1.62;

  /* ---- Espaçamento ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-section: clamp(6rem, 4rem + 8vw, 11rem);
  --container-max: 1120px;
  --container-narrow: 760px;

  /* ---- Raios ---- */
  --radius-card: 20px;
  --radius-card-lg: 28px;
  --radius-pill: 980px;
  --radius-photo: 24px;
  --hairline: 1px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.5);
  --shadow-photo: 0 40px 70px -22px rgba(0, 0, 0, 0.65);
  --glow-accent: 0 10px 40px -8px rgba(124, 92, 255, 0.6);

  /* ---- Movimento ---- */
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 700ms;
  --duration-reveal: 950ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-apple: cubic-bezier(0.32, 0.08, 0.24, 1);

  /* ---- Grão (textura premium em fundos escuros) ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --topbar-height: 60px;
  --z-topbar: 100;
}

/* ---- Temas de seção (sobrescrevem os --t-* da subárvore) ---- */
.theme-graphite { --section-bg: var(--bg-graphite); }
.theme-plum     { --section-bg: var(--bg-plum); }
.theme-indigo   { --section-bg: var(--bg-indigo); }

.theme-cream {
  --section-bg: var(--cream);
  --t-primary: var(--cream-ink);
  --t-secondary: #534d5e;
  --t-tertiary: #8b8694;
  --t-line: rgba(0, 0, 0, 0.1);
  --t-line-strong: rgba(0, 0, 0, 0.18);
  --surface: #ffffff;
  --surface-2: #faf6ef;
  --surface-line: rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-reveal: 0ms;
  }
}