/* ============================================================
   ACERINA AMADOR — Design tokens
   Direction: "Vermelho" — molten body. Obsidian · vermillion · bone.
   All color in OKLCH. Contrast verified WCAG 2.1 AA.
   ============================================================ */

:root {
  /* --- Color: surfaces --- */
  --obsidian:      oklch(0.15 0.018 25);
  --obsidian-deep: oklch(0.105 0.015 25);
  --surface:       oklch(0.205 0.020 26);
  --surface-2:     oklch(0.255 0.022 28);
  --hairline:      oklch(1 0 0 / 0.12);
  --hairline-soft: oklch(1 0 0 / 0.07);

  /* --- Color: ink --- */
  --bone:      oklch(0.945 0.012 75);   /* body text — 16.8:1 on obsidian */
  --bone-dim:  oklch(0.80 0.014 60);    /* secondary — 10.5:1 */
  --muted:     oklch(0.665 0.016 45);   /* meta/labels — 6.4:1 */

  /* --- Color: brand red (vermelho) --- */
  --vermelho:        oklch(0.585 0.205 30);  /* large display / fills only */
  --vermelho-bright: oklch(0.66 0.215 34);   /* small red text, hover, focus — 5.8:1 */
  --vermelho-deep:   oklch(0.44 0.16 26);    /* red-drenched bg (bone text = 7.2:1) */
  --vermelho-ink:    oklch(0.135 0.02 25);   /* dark text on bright red (large) */

  /* --- Scrim ---
     Base de los velos sobre fotografía. Se mantiene OSCURO en todos los temas
     (incluido el claro): el texto hueso sobre sus fotos conserva el contraste. */
  --scrim: var(--obsidian-deep);

  /* --- Semantic --- */
  --bg:            var(--obsidian);
  --text:         var(--bone);
  --text-2:       var(--bone-dim);
  --accent:       var(--vermelho);
  --accent-hover: var(--vermelho-bright);
  --focus:        var(--vermelho-bright);

  /* --- Typography --- */
  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --font-text:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:    clamp(3.2rem, 11vw, 6rem);
  --fs-display: clamp(2.5rem, 7vw, 4.75rem);
  --fs-h2:      clamp(1.9rem, 4.4vw, 3.1rem);
  --fs-h3:      clamp(1.35rem, 2.3vw, 1.85rem);
  --fs-lead:    clamp(1.15rem, 1.9vw, 1.6rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.125rem);
  --fs-sm:      0.9375rem;
  --fs-label:   0.78rem;

  --lh-tight:  0.9;
  --lh-snug:   1.15;
  --lh-body:   1.6;

  --track-display: -0.01em;
  --track-label:   0.16em;

  /* --- Spacing --- */
  --space-2xs: 0.375rem;
  --space-xs:  0.5rem;
  --space-sm:  0.875rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  clamp(3rem, 6vw, 5rem);
  --space-2xl: clamp(4.5rem, 10vw, 8.5rem);
  --space-section: clamp(6rem, 13vw, 11rem);

  /* --- Layout --- */
  --gutter:     clamp(1.25rem, 5vw, 4rem);
  --maxw:       1400px;
  --maxw-wide:  1680px;
  --maxw-text:  66ch;

  /* --- Radii --- */
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* --- Borders / shadow / glow --- */
  --border:  1px solid var(--hairline);
  --shadow-lg: 0 24px 60px -20px oklch(0 0 0 / 0.7);
  --glow-red: 0 0 60px -10px oklch(0.585 0.205 30 / 0.55);

  /* --- Motion --- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-ui:     0.32s;
  --dur-slow:   0.8s;
  --dur-reveal: 1s;

  /* --- Z-index scale (semantic) --- */
  --z-base:    0;
  --z-media:   1;
  --z-content: 2;
  --z-nav:     100;
  --z-overlay: 200;
  --z-toast:   300;
}