:root{
  /* UI-FIX: the app chrome (appbar / bottomnav / drawer) is DARK NAVY in BOTH
     themes by design. Its ink must therefore come from chrome-scoped tokens
     that never flip with the theme — otherwise light-theme tokens (deep gold
     #5F4300, muted #2C3355) land on navy and go invisible. */
  --chrome-bg:#141a3a; --chrome-border:rgba(255,255,255,.14);
  --chrome-ink:rgba(255,255,255,.72); --chrome-ink-active:#F5C518;
  /* ===== color scale (single source of truth) ===== */
  --bg:#080B18; --bg2:#0C1124; --surface:#141930; --surface-2:#1B2140; --surface-3:#10142A;
  --glass:#141930; --stroke:rgba(255,255,255,.10); --border:rgba(255,255,255,.08);
  --txt:#F2F4FF; --muted:#98A3D0; --muted-2:#8a97c9; --muted-3:#cdd6ec; --white:#f5f6ff;
  --gold:#f5c518; --gold-deep:#e08e0b; --gold-soft:rgba(245,197,24,.18); --gold-ink:#1a1400;
  --accent:#7c6cf0; --accent-2:#4a3f8f; --accent-3:#6a5acd; --accent-soft:#8b7ce8; --indigo:#4f5bd5; --bg-glow:#16205A;
  --danger:#e5484d; --danger-soft:#e0555f; --success:#10b981;
  --green-ink:#0e7a43; --warn-bg-a:#5b2a0e; --warn-bg-b:#7a3b12; --warn-txt:#ffd9a8;
  /* Astrology element colors (fixed semantic palette, same in both themes) */
  --el-fire:#e4572e; --el-fire-soft:rgba(228,87,46,.16); --el-fire-line:rgba(228,87,46,.4);
  --el-earth:#5f7a3a; --el-earth-soft:rgba(124,158,90,.16); --el-earth-line:rgba(124,158,90,.4);
  --el-air:#3a6a94; --el-air-soft:rgba(74,123,166,.16); --el-air-line:rgba(74,123,166,.4);
  --el-water:#1f8074; --el-water-soft:rgba(42,157,143,.16); --el-water-line:rgba(42,157,143,.4);
  
  --tint-paper-a85:rgba(232,236,255,.85); --gold-line-a40:rgba(245,197,24,.4);
  --stroke-a15:rgba(255,255,255,.15); --glass-a20:rgba(255,255,255,.2);
  --danger-a20:rgba(255,107,107,.2); --danger-a40:rgba(255,107,107,.4);
  --warn-line-a35:rgba(255,215,130,.35); --danger-hot:#ff5b5b;
    /* X18 sweep */
  --x-ra245-197-24-d14:rgba(245,197,24,.14);
  --x-ra255-255-255-d03:rgba(255,255,255,.03);
  --x-ra255-255-255-d08:rgba(255,255,255,.08);
  --x-ra255-255-255-d06:rgba(255,255,255,.06);
  --x-ra255-255-255-d07:rgba(255,255,255,.07);
  --x-ra255-255-255-d05:rgba(255,255,255,.05);
  --x-heee:#eee;
  --x-ra124-108-240-d45:rgba(124,108,240,.45);
  --x-ra192-57-43-d15:rgba(192,57,43,.15);
  --x-ra42-157-143-d18:rgba(42,157,143,.18);
  --x-ra255-107-107-d5:rgba(255,107,107,.5);
  --x-ra255-213-66-d12:rgba(255,213,66,.12);
  --x-ra255-213-66-d35:rgba(255,213,66,.35);
  --x-ra139-92-246-d15:rgba(139,92,246,.15);
  --x-ra76-209-123-d4:rgba(76,209,123,.4);
  --x-ra76-209-123-d08:rgba(76,209,123,.08);
  --x-ra245-197-24-d10:rgba(245,197,24,.10);
  --x-ra255-255-255-d02:rgba(255,255,255,.02);
  --x-ra245-197-24-d28:rgba(245,197,24,.28);
  --x-ra212-175-55-d08:rgba(212,175,55,.08);
  --x-ra212-175-55-d25:rgba(212,175,55,.25);
  --x-ra255-213-66-d4:rgba(255,213,66,.4);
  --x-ra236-100-120-d5:rgba(236,100,120,.5);
  --x-ra124-108-240-d16:rgba(124,108,240,.16);
  --x-ra124-108-240-d35:rgba(124,108,240,.35);
  --x-ra16-185-129-d2:rgba(16,185,129,.2);
  --x-ra220-38-38-d2:rgba(220,38,38,.2);
  --x-ra59-130-246-d2:rgba(59,130,246,.2);
  --x-ra245-197-24-d07:rgba(245,197,24,.07);
  --x-ra139-92-246-d2:rgba(139,92,246,.2);
  --x-ra255-255-255-d1:rgba(255,255,255,.1);
  --x-ra0-0-0-d55:rgba(0,0,0,.55);
  --x-ra20-10-40-d55:rgba(20,10,40,.55);
  --x-ra124-108-240-d22:rgba(124,108,240,.22);
  --x-ra124-108-240-d5:rgba(124,108,240,.5);
  --x-ra30-160-90-d18:rgba(30,160,90,.18);
  --x-ra30-160-90-d5:rgba(30,160,90,.5);
  --x-ra245-197-24-d22:rgba(245,197,24,.22);
  --x-ra245-197-24-d06:rgba(245,197,24,.06);

  /* X19/R13: nav & chip ink — theme-aware whites */
  --nav-ink-a82:rgba(255,255,255,.82); --nav-ink-a6:rgba(255,255,255,.6);
  --nav-ink-a7:rgba(255,255,255,.7); --nav-ink-a8:rgba(255,255,255,.8);
  --nav-ink-a85:rgba(255,255,255,.85); --nav-ink-a9:rgba(255,255,255,.9);
  --nav-ink-a65:rgba(255,255,255,.65); --nav-ink-a75:rgba(255,255,255,.75);

  --gold-text:#f5c518;

  --w-d04:rgba(255,255,255,0.04); --w-d05:rgba(255,255,255,0.05); --w-d06:rgba(255,255,255,0.06); --w-d07:rgba(255,255,255,0.07); --w-d08:rgba(255,255,255,0.08); --w-d09:rgba(255,255,255,0.09); --w-d1:rgba(255,255,255,1); --w-d10:rgba(255,255,255,0.10); --w-d12:rgba(255,255,255,0.12); --w-d14:rgba(255,255,255,0.14); --w-d16:rgba(255,255,255,0.16); --w-d22:rgba(255,255,255,0.22); --w-d64:rgba(255,255,255,0.64); --w-d82:rgba(255,255,255,0.82); --w-d85:rgba(255,255,255,0.85);

/* ===== spacing 8pt scale (no arbitrary gaps) ===== */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  /* ===== typography (Persian prefers taller line-height) ===== */
  /* Typography faces (F2): display=Estedad variable, body=Vazirmatn */
  --font-display:'SahelDisplay', Vazirmatn, Tahoma, sans-serif;
  --font-body:Vazirmatn, Tahoma, sans-serif;
  /* Motion tokens (F2): spring-physics feel, purposeful */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);  /* overshoot: buttons, cards */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.16s; --dur-base:.28s; --dur-slow:.5s;
  /* Tinted depth (F2): shadows carry the palette, never flat black */
  --shadow-1:0 1px 2px rgba(8,11,24,.18);
  --shadow-2:0 6px 18px -6px rgba(8,11,24,.35);
  --shadow-3:0 18px 44px -18px rgba(8,11,24,.5);
  --shadow-4:0 32px 80px -34px rgba(8,11,24,.62);
  --fs-xs:.72rem; --fs-sm:.85rem; --fs-md:1rem; --fs-lg:1.2rem; --fs-xl:1.5rem; --fs-2xl:1.9rem; --fs-3xl:2.4rem;
  --lh-tight:1.25; --lh-normal:1.6; --lh-loose:1.8;
  /* ===== radii ===== */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-full:999px;
  /* ===== shadows / blur / motion ===== */
  --sh-1:0 2px 12px rgba(0,0,0,.35); --sh-2:0 8px 32px rgba(0,0,0,.35); --sh-3:0 24px 64px rgba(0,0,0,.55);
  --blur-glass:blur(24px); --ease:cubic-bezier(.23,1,.32,1);
  /* ===== z-index scale (was hand-placed) ===== */
  --z-nav:80; --z-drawer:90; --z-modal:100; --z-toast:110;
  /* legacy alias (used by base.css/templates) */
  --radius:22px;
  --pure:#ffffff; --red-err:#ff5b5b; --lav:#e8e2f5;
  --star-1:rgba(255,255,255,.53); --star-2:rgba(255,255,255,.98); --star-3:rgba(255,255,255,.40); --star-4:rgba(255,255,255,.33); --star-5:rgba(255,255,255,.27);
}

/* C4: light theme (opt-in via data-theme="light")
   R13/P1-10: the old light palette washed out — glass surfaces were almost
   invisible on the near-white bg and gold text failed contrast. New values:
   warmer paper bg, stronger surface borders, darker muted text (AA+). */
[data-theme="light"]{
  --bg:#eef0f8; --bg2:#e4e7f3; --surface:#ffffff; --surface-2:#f2f4fb; --surface-3:#f8f9fd;
  --glass:rgba(255,255,255,.72); --stroke:rgba(28,34,70,.22); --border:rgba(28,34,70,.16);
  --txt:#181d38; --muted:#3f4769; --muted-2:#525b82; --muted-3:#2c3355; --white:#181d38;
  /* X19: --gold stays the BRAND fill (gradient) in both themes; text-on-light uses
     --gold-text (deep). The credits chip overrides its own color to --gold-text. */
  --gold:#e0a900; --gold-deep:#a06a00; --gold-soft:rgba(180,122,6,.14); --gold-ink:#241a00;
  --gold-text:#5f4300; --warn-txt:#4d320a;
  --accent-soft:#4438bd; --bg-glow:#dcdff2;
  --star-1:rgba(30,40,90,.35); --star-2:rgba(30,40,90,.75); --star-3:rgba(30,40,90,.28); --star-4:rgba(30,40,90,.24); --star-5:rgba(30,40,90,.18);

  --ink-strong:#202a4e; --ink-soft:#454f78; --ink-sky:#2f4fc4;
  --gold-line:#8f6800; --danger-bright:#c92a2a; --violet:#6d28d9; --violet-soft:#7c3aed;
  --green-ok:#15803d; --slate-mute:#57637a; --paper:#333b58;
  --glass-a3:rgba(28,34,70,.03); --glass-a6:rgba(28,34,70,.06);
  --glass-a7:rgba(28,34,70,.08); --glass-a8:rgba(28,34,70,.10);

  --tint-paper-a85:rgba(26,32,64,.8); --gold-line-a40:rgba(160,106,0,.45);
  --stroke-a15:rgba(28,34,70,.18); --glass-a20:rgba(28,34,70,.09);
  --danger-a20:rgba(224,42,42,.12); --danger-a40:rgba(201,42,42,.45);
  --warn-line-a35:rgba(160,106,0,.4); --danger-hot:#c92a2a;
  --x-ra245-197-24-d14:rgba(160,106,0,.16);
  --x-ra255-255-255-d03:rgba(28,34,70,.03);
  --x-ra255-255-255-d08:rgba(28,34,70,.08);
  --x-ra255-255-255-d06:rgba(28,34,70,.06);
  --x-ra255-255-255-d07:rgba(28,34,70,.07);
  --x-ra255-255-255-d05:rgba(28,34,70,.05);
  --x-ra255-107-107-d5:rgba(28,34,70,.5);
  --x-ra255-213-66-d12:rgba(28,34,70,.12);
  --x-ra255-213-66-d35:rgba(28,34,70,.35);
  --x-ra245-197-24-d10:rgba(160,106,0,.12);
  --x-ra255-255-255-d02:rgba(28,34,70,.02);
  --x-ra245-197-24-d28:rgba(160,106,0,.3);
  --x-ra255-213-66-d4:rgba(28,34,70,.4);
  --x-ra245-197-24-d07:rgba(160,106,0,.08);
  --x-ra255-255-255-d1:rgba(28,34,70,.1);
  --x-ra245-197-24-d22:rgba(160,106,0,.24);
  --x-ra245-197-24-d06:rgba(160,106,0,.06);

  --nav-ink-a82:rgba(24,29,56,.82); --nav-ink-a6:rgba(24,29,56,.6);
  --nav-ink-a7:rgba(24,29,56,.7); --nav-ink-a8:rgba(24,29,56,.8);
  --nav-ink-a85:rgba(24,29,56,.85); --nav-ink-a9:rgba(24,29,56,.9);
  --nav-ink-a65:rgba(24,29,56,.65); --nav-ink-a75:rgba(24,29,56,.75);
  --w-d04:rgba(24,29,56,0.04); --w-d05:rgba(24,29,56,0.05); --w-d06:rgba(24,29,56,0.06); --w-d07:rgba(24,29,56,0.07); --w-d08:rgba(24,29,56,0.09); --w-d09:rgba(24,29,56,0.11); --w-d1:rgba(24,29,56,1); --w-d10:rgba(24,29,56,0.12); --w-d12:rgba(24,29,56,0.15); --w-d14:rgba(24,29,56,0.18); --w-d16:rgba(24,29,56,0.20); --w-d22:rgba(24,29,56,0.26); --w-d64:rgba(24,29,56,0.68); --w-d82:rgba(24,29,56,0.84); --w-d85:rgba(24,29,56,0.86);
  --green-ink:#0b6b3a;
}

/* ══════════════════════════════════════════════════════════════
   W1.1 — SEMANTIC TOKEN LAYER (REDESIGN-MASTER §4)
   Meaningful names ONLY. Machine tokens (--x-ra…, --w-d08) are the
   legacy layer below and will be dissolved page-by-page (W1.2).
   Every token here is defined in BOTH themes.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* type scale — 1.25 major third */
  --font-size-xs:.75rem;  --font-size-sm:.875rem; --font-size-base:1rem;
  --font-size-lg:1.125rem;--font-size-xl:1.25rem; --font-size-2xl:1.5rem;
  --font-size-3xl:1.875rem;
  --line-tight:1.3; --line-normal:1.55; --line-loose:1.75;
  --weight-regular:400; --weight-medium:600; --weight-bold:800;

  /* spacing — 4px base */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:64px;--space-11:80px;--space-12:96px;

  /* radii + shadows (elevation, not decoration) */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --radius-full:999px;
  --shadow-1:0 2px 8px rgba(2,6,23,.18);
  --shadow-2:0 6px 20px rgba(2,6,23,.22);
  --shadow-3:0 12px 36px rgba(2,6,23,.28);
  --shadow-4:0 20px 56px rgba(2,6,23,.34);

  /* motion: single source of truth lives in the first :root block (F2).
     A duplicate set here used to silently win the cascade, so the tuned
     spring/duration tokens never actually applied. */

  /* z-index ladder — no more magic numbers */
  --z-base:1; --z-dropdown:60; --z-sticky:70; --z-overlay:80; --z-modal:90; --z-toast:100;

  /* semantic aliases → map onto the palette above */
  --brand:var(--gold);
  --brand-ink:var(--gold-ink);
  --brand-soft:var(--gold-soft);
  --text:var(--txt);
  --text-muted:var(--muted);
  --text-subtle:var(--muted-2);
  --surface-raised:var(--surface-2);
}

[data-theme="light"]{
  --shadow-1:0 2px 8px rgba(30,38,80,.10);
  --shadow-2:0 6px 20px rgba(30,38,80,.12);
  --shadow-3:0 12px 36px rgba(30,38,80,.14);
  --shadow-4:0 20px 56px rgba(30,38,80,.16);
}