/* ============================================================
   DESIGN TOKENS
   One palette, one type system, one motion vocabulary.
   ============================================================ */
:root {
  /* --- Palette: night, ink, ivory, antique gold --- */
  --c-midnight:    #0a0f1e;
  --c-midnight-2:  #0e1530;
  --c-indigo:      #131b3a;
  --c-emerald:     #071a1b;
  --c-emerald-2:   #0b2425;
  --c-charcoal:    #111219;
  --c-dawn:        #1b2247;

  --c-ivory:       #f4ecd9;
  --c-ivory-2:     #ece2c9;
  --c-cream:       #e6dabd;
  --c-sand:        #c9b78f;

  --c-ink:         #1d1810;
  --c-ink-soft:    #5a5040;
  --c-ink-faint:   #8a7d66;

  --c-gold:        #c8a75d;
  --c-gold-light:  #e9d6a0;
  --c-gold-deep:   #9c7c3c;
  --c-gold-ink:    #7a5f2a;
  --c-turquoise:   #4f9f97;

  /* Text on dark grounds */
  --t-1: #ece5d3;
  --t-2: rgba(236, 229, 211, 0.74);
  --t-3: rgba(236, 229, 211, 0.5);

  /* Active atmosphere (driven by body[data-atmo]) */
  --bg: var(--c-midnight);

  /* --- Typography --- */
  --f-display: "Noto Nastaliq Urdu", "Amiri", serif;
  --f-serif:   "Amiri", "Noto Naskh Arabic", "Times New Roman", serif;
  --f-sans:    "Vazirmatn", "Segoe UI", system-ui, sans-serif;

  --fs-xs:  0.8rem;
  --fs-sm:  0.92rem;
  --fs-md:  1.06rem;
  --fs-lg:  1.28rem;
  --fs-xl:  clamp(1.5rem, 1.1rem + 1.4vw, 2.05rem);
  --fs-2xl: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  --fs-3xl: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem);

  --lh-tight: 1.5;
  --lh-body: 2;
  --lh-display: 2.15;

  /* --- Spacing --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: clamp(5rem, 9vw, 8rem);
  --sp-7: clamp(7rem, 13vw, 12rem);
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  --measure: 36rem;
  --measure-wide: 46rem;
  --container: 80rem;

  /* --- Radii --- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 28px;

  /* --- Lines & surfaces --- */
  --hairline: rgba(200, 167, 93, 0.22);
  --hairline-strong: rgba(200, 167, 93, 0.45);
  --hairline-ink: rgba(122, 95, 42, 0.28);

  --glass-bg: linear-gradient(180deg, rgba(255, 250, 235, 0.045), rgba(255, 250, 235, 0.015));
  --glass-border: rgba(233, 214, 160, 0.16);

  --sh-soft: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
  --sh-leaf: 0 40px 80px -36px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --sh-glow: 0 0 80px -16px rgba(200, 167, 93, 0.35);

  /* --- Ornament opacity --- */
  --orn-faint: 0.05;
  --orn-soft: 0.12;
  --orn-mid: 0.28;

  /* --- Motion --- */
  --d-fast: 0.32s;
  --d-base: 0.75s;
  --d-slow: 1.25s;
  --d-glacial: 2.6s;
  --e-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Geometry: the eight-point star (two overlapped squares) --- */
  --star8: polygon(
    100% 50%, 85.36% 64.64%, 85.36% 85.36%, 64.64% 85.36%,
    50% 100%, 35.36% 85.36%, 14.64% 85.36%, 14.64% 64.64%,
    0% 50%, 14.64% 35.36%, 14.64% 14.64%, 35.36% 14.64%,
    50% 0%, 64.64% 14.64%, 85.36% 14.64%, 85.36% 35.36%
  );

  /* Star-and-cross lattice, drawn once, tiled everywhere at low opacity */
  --pattern-lattice: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><defs><polygon id='s' points='84,50 74,60 74,74 60,74 50,84 40,74 26,74 26,60 16,50 26,40 26,26 40,26 50,16 60,26 74,26 74,40'/></defs><g fill='none' stroke='%23c8a75d' stroke-width='0.9'><use href='%23s'/><use href='%23s' transform='translate(-50 -50)'/><use href='%23s' transform='translate(50 -50)'/><use href='%23s' transform='translate(-50 50)'/><use href='%23s' transform='translate(50 50)'/></g></svg>");

  /* Fine grain */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Atmosphere states: the journey slowly changes its ground */
body[data-atmo="midnight"] { --bg: var(--c-midnight); }
body[data-atmo="indigo"]   { --bg: var(--c-indigo); }
body[data-atmo="emerald"]  { --bg: var(--c-emerald); }
body[data-atmo="charcoal"] { --bg: var(--c-charcoal); }
body[data-atmo="dawn"]     { --bg: var(--c-dawn); }