/* ============================================================
   Ooyana — Design Tokens  (Plum & Lavender Edition)
   ============================================================ */

:root {
  /* ── Brand Palette: Plum & Lavender ── */
  --primary:         #B98FB0;   /* Lavender */
  --primary-light:   #D2B2CB;   /* Soft Lavender */
  --primary-mid:     #8F6E89;   /* Mauve mid */
  --primary-dark:    #6E3F63;   /* Deep Plum */
  --primary-deeper:  #5A3251;   /* Deep press state */
  --primary-pale:    #F3E9F1;   /* Almost-white lavender tint */

  /* ── Secondary / Warm Accent ── */
  --gold:            #9C6B8E;
  --gold-lt:         #C9A0C0;
  --gold-warm:       #A8698F;
  --gold-pale:       #F0E4ED;

  /* ── Brand colours for TEXT ──
     --primary-dark, --gold and --sale are dark, saturated values: they read
     well as text on a light page and as backgrounds in either theme, but on the
     dark theme's near-black surfaces they collapse to ~2.2:1 — far under the
     4.5:1 minimum. These three aliases are the ones to use in any `color:`
     declaration; the dark theme re-points them at the light end of the same
     families further down, so no rule has to be restated per theme.
     Backgrounds, borders and fills should keep using the originals. */
  --brand-ink:       #6E3F63;   /* = --primary-dark, headings & emphasis */
  /* One step deeper than --gold (#9C6B8E). The eyebrows and tab labels using
     it sit on the pale section bands, where --gold managed only 3.85:1; this
     clears 4.5 on every light surface in use (4.84 on the palest, #F8F1F6). */
  --brand-ink-soft:  #8A5C7D;   /* eyebrows & secondary text               */
  --brand-sale:      #B83232;   /* = --sale, offer/price-drop text         */

  /* ── Backward-compat aliases ── */
  --terracotta:      #9C6B8E;   /* = --gold */
  --parchment:       #C9A0C0;   /* = --gold-lt */
  --sand:            #8F7488;
  --warm-dark:       #5B4A56;
  --warm-mid:        #96838F;
  --warm-light:      #C7B4C0;
  --off-white:       #F0E4ED;

  /* ── Base ── */
  --white:           #FDFAFC;
  --black:           #1A1218;

  /* ── Semantic ── */
  --bg:              #FDFAFC;
  --bg-alt:          #F8F1F6;
  --bg-soft:         #F1E4EE;
  --surface:         #FFFFFF;
  --surface-glass:   rgba(255,255,255,.97);  /* translucent header/overlay backdrop */
  --ink:             #1A1218;
  --ink-soft:        #3D2E3A;
  --ink-mute:        #6E626B;
  --line:            #E8DCE5;
  --line-strong:     #D6C3D1;

  --accent:          #6E3F63;   /* = --primary-dark */
  --accent-hover:    #5A3251;   /* = --primary-deeper */

  --success:         #5C7A5C;
  --danger:          #B8554A;
  --sale:            #B83232;

  /* ── Typography ── */
  --font-ar-display: 'Tajawal', 'Noto Serif Arabic', sans-serif;
  --font-ar-body:    'Tajawal', 'Noto Serif Arabic', sans-serif;
  --font-en-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-en-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:       'JetBrains Mono', 'Courier New', monospace;

  /* ── Type Scale ── */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;
  --fs-3xl:   2.5rem;
  --fs-4xl:   3.25rem;
  --fs-5xl:   4.5rem;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ── Radii ── */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px rgba(94,58,84,.04);
  --shadow-sm:   0 4px 28px rgba(94,58,84,.07);
  --shadow-md:   0 10px 50px rgba(94,58,84,.10);
  --shadow-lg:   0 20px 70px rgba(94,58,84,.14);
  --shadow-xl:   0 36px 100px rgba(94,58,84,.19);
  --shadow-gold: 0 14px 42px rgba(110,63,99,.26);
  --shadow-card: 0 1px 3px rgba(94,58,84,.06), 0 6px 20px rgba(94,58,84,.04);

  /* ── Motion ── */
  --ease:      cubic-bezier(0.22, 0.68, 0, 1.2);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:    150ms;
  --t-base:    250ms;
  --t-slow:    400ms;

  /* ── Layout ── */
  --container:      1440px;
  --container-pad:  clamp(1rem, 3.3vw, 3rem);
  --header-h:       72px;
  --announce-h:     40px;
}

/* ============================================================
   Dark mode (Phase 34a) — overrides only the semantic "page
   chrome" tokens (background/text/border/surface). Brand colors
   (--primary*, --gold*, --accent, --white, --black) are left
   untouched: they're mid-tone plum/lavender hues used on buttons,
   badges and gradients that already read fine against either a
   light or dark page background, and leaving them alone keeps the
   blast radius small across the dozens of files that reference
   them without needing to audit every usage.
   Toggled via [data-theme] on <html>, set by assets/js/theme.js.
   ============================================================ */
:root[data-theme="dark"] {
  --bg:              #17111A;
  --bg-alt:          #1E1720;
  --surface-glass:   rgba(23,17,26,.92);
  --bg-soft:         #241B27;
  --surface:         #1C151E;
  --ink:             #F3ECF1;
  --ink-soft:        #D8CCD5;
  --ink-mute:        #A895A3;
  --line:            #362A34;
  --line-strong:     #493A46;

  /* Text-only brand colours, moved to the light end of each family. Measured
     against --bg #17111A: 8.20, 6.73 and 5.65 respectively (4.5 required).
     The two ink tones stay one step apart so the heading/eyebrow hierarchy
     survives the swap. */
  --brand-ink:       #C9A0C0;   /* = --gold-lt  */
  --brand-ink-soft:  #B98FB0;   /* = --primary  */
  --brand-sale:      #DE6B64;   /* lightened --sale, still reads as red */

  /* The two pale tints are *surfaces* — chips, icon discs, section bands. Left
     at their light values they punch near-white holes in a near-black page, and
     any brand-ink text sitting on them drops to ~1.9:1. Re-pointed at deep
     tints of the same hue: they still read as raised against --bg, and
     --brand-ink scores 6.88 / 6.59 on them. */
  --primary-pale:    #2A2030;
  --gold-pale:       #2E2334;

  --shadow-xs:   0 1px 2px rgba(0,0,0,.30);
  --shadow-sm:   0 4px 28px rgba(0,0,0,.35);
  --shadow-md:   0 10px 50px rgba(0,0,0,.40);
  --shadow-lg:   0 20px 70px rgba(0,0,0,.45);
  --shadow-xl:   0 36px 100px rgba(0,0,0,.50);
  --shadow-card: 0 1px 3px rgba(0,0,0,.30), 0 6px 20px rgba(0,0,0,.25);
}