/* ============================================================
   IARU — design tokens
   Black and deep blue dominate. Gold is an accent, never a theme.
   ============================================================ */

:root {
  /* ---- brand palette ---- */
  --obsidian:        #050505;
  --egypt-blue:      #071a33;
  --royal-blue:      #0b2f63;
  --gold-antique:    #c9973a;
  --gold-light:      #e5be67;
  --sand-warm:       #d9c3a2;
  --ivory-soft:      #f5f1e8;

  /* ---- surfaces ---- */
  --bg:              var(--obsidian);
  --bg-elevated:     #0a0a0c;
  --glass:           rgba(6, 10, 18, 0.72);
  --glass-strong:    rgba(4, 7, 13, 0.9);
  --hairline:        rgba(201, 151, 58, 0.28);
  --hairline-soft:   rgba(245, 241, 232, 0.12);

  /* ---- text ---- */
  --text:            var(--ivory-soft);
  --text-dim:        rgba(245, 241, 232, 0.74);
  --text-faint:      rgba(245, 241, 232, 0.52);
  --text-gold:       var(--gold-light);

  /* ---- chapter accents (swapped per scene theme) ---- */
  --accent:          var(--gold-light);
  --accent-deep:     var(--gold-antique);
  --glow:            rgba(201, 151, 58, 0.35);

  /* ---- type ---- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ar: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

  --fs-eyebrow: clamp(0.62rem, 0.55rem + 0.3vw, 0.78rem);
  --fs-body:    clamp(0.95rem, 0.88rem + 0.35vw, 1.12rem);
  --fs-lead:    clamp(1.02rem, 0.9rem + 0.6vw, 1.32rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 1vw, 1.9rem);
  --fs-h2:      clamp(1.9rem, 1.35rem + 2.6vw, 3.5rem);
  --fs-hero:    clamp(2.35rem, 1.5rem + 4.6vw, 5.6rem);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.62;

  --tracking-wide: 0.28em;
  --tracking-mid:  0.12em;

  /* ---- space ---- */
  --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;

  --gutter: clamp(1.15rem, 0.6rem + 3.2vw, 5.5rem);
  --measure: 34ch;
  --shell-max: 1560px;

  /* ---- radius ---- */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---- elevation ---- */
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 28px 80px rgba(0, 0, 0, 0.7);

  /* ---- z-index ---- */
  --z-cinema: 0;
  --z-overlay: 10;
  --z-progress: 40;
  --z-header: 60;
  --z-panel: 80;
  --z-loader: 100;
  --z-cursor: 120;

  /* ---- motion: controlled, never bouncy ---- */
  --ease-cine:  cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-mid:  420ms;
  --dur-slow: 720ms;
  --dur-cine: 1100ms;
}

/* Scene themes retint the accent + ambient glow as the journey moves
   from desert gold to Red Sea blue. */
[data-theme='night'] { --accent: var(--gold-light);  --accent-deep: var(--gold-antique); --glow: rgba(201,151,58,.30); }
[data-theme='gold']  { --accent: #f0d089;            --accent-deep: var(--gold-antique); --glow: rgba(229,190,103,.42); }
[data-theme='sand']  { --accent: var(--sand-warm);   --accent-deep: var(--gold-antique); --glow: rgba(217,195,162,.30); }
[data-theme='blue']  { --accent: #7fd4d8;            --accent-deep: #2f8f9d;             --glow: rgba(127,212,216,.32); }
[data-theme='deep']  { --accent: #8fdce0;            --accent-deep: #1d6f7e;             --glow: rgba(143,220,224,.34); }