/*
  Design tokens — Dach & Co.
  Fuente: brief de marca §23 (paleta Atelier Notturno) y §26 (tipografía).
  Todo el sistema visual referencia estas variables — ningún hex ni valor
  de tipografía se declara suelto fuera de este archivo.
*/

:root {
  /* — Color: paleta Atelier Notturno (brief §23) — */
  --color-pergamena: #f0ebe2; /* fondo claro dominante */
  --color-ash: #a89b85; /* texto secundario / metadata */
  --color-charcoal: #3a332a; /* body de texto sobre Pergamena */
  --color-notte: #1c1a17; /* fondo oscuro, superficies amplias */
  --color-onyx: #0a0908; /* tipografía principal, isotipo, contraste duro */
  --color-champagne: #b89968; /* acento — máx. ~10–15% del área visual, nunca base */

  /*
    Reglas de combinación (brief §23), documentadas aquí porque el CSS
    de cada capítulo debe respetarlas y no hay otro lugar donde vivan:
    - Permitidas: Pergamena+Onyx · Notte+Pergamena · Pergamena+Champagne(acento) · Notte+Champagne(acento)
    - Prohibidas: Ash+Charcoal solos (sin contraste) · Champagne+Ash (compiten en warm neutral) · gradientes entre pares
    - Notte para superficies grandes; Onyx para tipografía y áreas pequeñas de máximo contraste.
  */

  /* — Modo por defecto: Pergamena (día). Cada <section data-mode="notte"> lo sobreescribe. — */
  --surface: var(--color-pergamena);
  --surface-alt: var(--color-ash);
  --ink: var(--color-onyx);
  --ink-secondary: var(--color-charcoal);
  --accent: var(--color-champagne);

  /* — Tipografía (brief §26) — */
  --font-serif: "Cormorant Garamond", "Times New Roman", serif; /* wordmark, headers, firma itálica */
  --font-sans: "Inter", -apple-system, "Segoe UI", sans-serif; /* fichas técnicas, UI densa */

  --tracking-wordmark: 0.32em; /* 5–6px sobre ~18px base ≈ 0.32em, brief pide letter-spacing generoso */
  --tracking-descriptor: 0.45em; /* "Dachshunds Obsessed" — tracking 6–8px */

  --type-hero: clamp(2.75rem, 3rem + 4vw, 7rem);
  --type-h1: clamp(2rem, 1.6rem + 2.5vw, 3.75rem);
  --type-h2: clamp(1.5rem, 1.3rem + 1.2vw, 2.25rem);
  --type-body-lg: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --type-body: 1rem;
  --type-meta: 0.6875rem;

  /* — Espaciado — */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 7rem;
  --space-7: 11rem;

  /* — Movimiento — */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-mode-shift: 900ms;
  --duration-reveal: 900ms;
  --duration-loader-draw: 1800ms;

  /* — Capas — */
  --z-nav: 50;
  --z-loader: 100;
}

/* Secciones en modo Notte invierten la relación fondo/texto localmente. */
[data-mode="notte"] {
  --surface: var(--color-notte);
  --surface-alt: var(--color-ash);
  --ink: var(--color-pergamena);
  --ink-secondary: var(--color-ash);
  --accent: var(--color-champagne);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-mode-shift: 1ms;
    --duration-reveal: 1ms;
    --duration-loader-draw: 1ms;
  }
}