/* =========================================================
   TOKENS — sistema visual
   Direção: LUXO CLARO ("light luxury"). Fundo predominante
   branco, tipografia serifada refinada (Cormorant), rótulos
   em sans leve espaçado (Jost), esculturas de vidro/cristal
   transparente como elemento de marca. Grafite no texto,
   dourado apenas como sussurro. Cantos retos (editorial),
   com exceção de painéis de vidro.
   ========================================================= */

:root {
  /* ---------- Cor (cru) ---------- */
  --c-ink: #1d1b1a;         /* grafite quase preto — títulos */
  --c-ink-2: #34302d;
  --c-graphite: #6a6461;    /* cinza médio — texto de apoio */
  --c-silver: #9c9793;      /* cinza claro */
  --c-mist: #f6f5f3;        /* branco levemente quente — fundo alt */
  --c-mist-2: #edece9;
  --c-white: #ffffff;
  --c-gold: #b79b6e;        /* dourado sussurro (marca) */
  --c-gold-deep: #9c7f52;

  /* Compat: nomes antigos (do tema escuro) → paleta clara.
     Texto escuro vira grafite; "cream" (antes texto claro) vira branco;
     CTA continua escuro (botão grafite no branco = luxo). */
  --c-dark: var(--c-ink);
  --c-dark-2: var(--c-ink-2);
  --c-dark-gray: var(--c-graphite);
  --c-light-gray: var(--c-silver);
  --c-cream: var(--c-white);
  --c-cream-2: var(--c-mist);
  --c-cta-gray: #262320;

  /* ---------- Papéis semânticos — nasce CLARO ---------- */
  --c-bg: var(--c-white);
  --c-bg-alt: var(--c-mist);
  --c-bg-deep: var(--c-mist-2);
  --c-surface: rgba(29, 27, 26, 0.028);
  --c-surface-2: rgba(29, 27, 26, 0.05);

  --c-text: var(--c-ink);
  --c-text-soft: rgba(29, 27, 26, 0.64);
  --c-text-mute: rgba(29, 27, 26, 0.40);
  --c-text-invert: var(--c-white);
  --c-text-invert-soft: rgba(255, 255, 255, 0.74);

  --c-line: rgba(29, 27, 26, 0.11);
  --c-line-strong: rgba(29, 27, 26, 0.26);
  --c-line-invert: rgba(255, 255, 255, 0.22);

  /* Ênfase monocromática refinada (grafite); dourado é detalhe. */
  --c-accent: var(--c-ink);
  --c-accent-deep: #000000;
  --c-accent-soft: rgba(29, 27, 26, 0.06);
  --c-accent-contrast: var(--c-white);
  --c-gold-line: rgba(183, 155, 110, 0.55);

  --c-good: #5f7a5c;
  --c-good-soft: rgba(95, 122, 92, 0.10);
  --c-bad: #a85b4f;
  --c-calm: #6d7c92;
  --c-calm-soft: rgba(109, 124, 146, 0.10);
  --c-warn: var(--c-gold-deep);
  --c-warn-soft: rgba(156, 127, 82, 0.12);

  /* ---------- Vidro / cristal ---------- */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-edge: rgba(29, 27, 26, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 40px 90px -50px rgba(29, 27, 26, 0.30);
  --glass-blur: 16px;
  --chrome: linear-gradient(135deg, #ffffff 0%, #eceae7 38%, #cfccc8 60%, #f4f3f1 100%);

  /* ---------- Tipografia ---------- */
  --font-display: "Cormorant Garamond", "Playfair Display", "Times New Roman", serif;
  --font-body: "Jost", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-script: "Cormorant Garamond", "Playfair Display", serif;
  --font-sans: var(--font-body);
  --font-serif: var(--font-display);

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: clamp(1rem, 0.97rem + 0.16vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  --text-4xl: clamp(2.75rem, 1.7rem + 4.2vw, 5.5rem);
  --text-hero: clamp(3rem, 1.5rem + 6.2vw, 8rem);
  --text-huge: clamp(3.5rem, 1rem + 9.5vw, 11rem);

  --leading-tight: 0.98;
  --leading-snug: 1.12;
  --leading-normal: 1.6;

  /* Display: serifada elegante, contraste alto, tracking neutro.
     Rótulos: sans leve com tracking largo (estilo "MENTORIA"). */
  --tracking-display: -0.008em;
  --tracking-tight: 0;
  --tracking-label: 0.26em;
  --tracking-wide: 0.34em;

  /* ---------- Espaço ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-section: clamp(5rem, 3rem + 7vw, 11rem);
  --space-section-sm: clamp(3rem, 2rem + 3.5vw, 6rem);

  --w-container: 84rem;
  --w-narrow: 46rem;
  --w-prose: 36rem;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);

  /* ---------- Forma: arredondada moderna (bento/glass) ---------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-2xl: 38px;
  --radius-pill: 999px;
  --radius-glass: 30px;

  --blur-sm: 4px;
  --blur-md: 10px;
  --blur-lg: 20px;

  /* Sombras suaves (luxo claro). */
  --shadow-xs: none;
  --shadow-sm: 0 2px 10px -6px rgba(29, 27, 26, 0.18);
  --shadow-md: 0 30px 60px -45px rgba(29, 27, 26, 0.28);
  --shadow-lg: 0 60px 110px -60px rgba(29, 27, 26, 0.30);
  --shadow-pill: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 8px 20px -12px rgba(29, 27, 26, 0.5);

  /* ---------- Movimento ---------- */
  --dur-fast: 240ms;
  --dur-normal: 520ms;
  --dur-slow: 900ms;
  --dur-reveal: 1200ms;
  --ease-out: cubic-bezier(0.22, 0.31, 0, 1);
  --ease-out-expo: cubic-bezier(0.22, 0.31, 0, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  /* ---------- Camadas ---------- */
  --z-grain: 60;
  --z-header: 80;
  --z-progress: 85;
  --z-nav-panel: 79;
  --z-cursor: 95;
  --z-loader: 100;
  --z-intro: 100;
}

/* Bloco de tinta suave (mist) — alterna seções sem sair do claro. */
.on-light {
  --c-bg: var(--c-mist);
  --c-surface: rgba(29, 27, 26, 0.04);
  --c-surface-2: rgba(29, 27, 26, 0.06);
  --c-text: var(--c-ink);
  --c-text-soft: rgba(29, 27, 26, 0.64);
  --c-text-mute: rgba(29, 27, 26, 0.42);
  --c-line: rgba(29, 27, 26, 0.12);
  --c-line-strong: rgba(29, 27, 26, 0.28);
  --c-accent: var(--c-ink);
  --c-accent-soft: rgba(29, 27, 26, 0.06);
  background: var(--c-bg);
  color: var(--c-text);
}

/* Bloco de contraste ESCURO (grafite) — para momentos dramáticos
   (faixa de CTA, fechamento). Vidro e texto se ajustam. */
.on-dark {
  --c-bg: var(--c-ink);
  --c-bg-alt: var(--c-ink-2);
  --c-surface: rgba(255, 255, 255, 0.06);
  --c-surface-2: rgba(255, 255, 255, 0.09);
  --c-text: #f3f1ee;
  --c-text-soft: rgba(243, 241, 238, 0.70);
  --c-text-mute: rgba(243, 241, 238, 0.45);
  --c-line: rgba(255, 255, 255, 0.16);
  --c-line-strong: rgba(255, 255, 255, 0.34);
  --c-accent: #ffffff;
  --c-accent-contrast: var(--c-ink);
  --c-accent-soft: rgba(255, 255, 255, 0.10);
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-edge: rgba(255, 255, 255, 0.14);
  background: var(--c-bg);
  color: var(--c-text);
}

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