/* ============================================================
   Red Gold — Design tokens (SINGLE SOURCE OF TRUTH)
   ------------------------------------------------------------
   This file is loaded before core.css and is now the only place the
   :root tokens are defined (the previous duplicate :root in core.css was
   removed, so there is nothing left to "keep in sync").
   The "Semantic names" and "Dark theme" sections are additive and optional.
   Machine-readable mirror: tokens.json
   ============================================================ */

:root{
  /* ---- gold (molten refined) ---- */
  --amber:oklch(75.4% 0.151 77.8);          /* base interactive gold */
  --amber-2:oklch(68.3% 0.142 74.4);        /* darker shade */
  --amber-deep:oklch(54.3% 0.115 70.7);     /* ink/icon on light surface, gold link */
  --amber-soft:oklch(94.3% 0.041 86.7);     /* soft chip/tag background */
  --gold-line:oklch(84.4% 0.090 85.8);      /* gold hairline */
  --gold-ink:oklch(37.9% 0.077 74.1);       /* ink on gold surface */
  --cube:linear-gradient(145deg,#FCE7A4 0%,#EFC24E 30%,#D89A1E 58%,#B7790F 73%,#F2CE63 100%);
  --cube-edge:oklch(54.9% 0.113 70.7);

  /* ---- garnet (editorial accent for brand/Persepolis) ---- */
  --garnet:oklch(39.9% 0.148 23.7);
  --garnet-2:oklch(33.8% 0.126 23.6);
  --garnet-deep:oklch(26.9% 0.100 23.4);
  --garnet-soft:oklch(93.9% 0.017 26.7);

  /* ---- ink and warm grays ---- */
  --ink:oklch(20.6% 0.012 55.6);
  --ink-2:oklch(35.7% 0.024 66.9);
  /* darkened from 58.6% → 51% so secondary/caption text clears WCAG AA on cream */
  --muted:oklch(51% 0.029 73.4);

  /* ---- paper (warm ivory) ---- */
  --bg:oklch(96.0% 0.008 84);
  --panel:oklch(98.0% 0.006 84);
  --card:oklch(100% 0 0);
  --page-bg:oklch(94.6% 0.010 86);
  --line:oklch(91.3% 0.015 84);
  --line-2:oklch(86.4% 0.019 84);

  /* ---- cinematic noir (matches product photography) ---- */
  --noir:oklch(17.9% 0.015 66.6);
  --noir-2:oklch(21.2% 0.018 62.8);
  --noir-3:oklch(25.5% 0.027 63.7);

  /* ---- market semantics ---- */
  --ok:oklch(56.6% 0.130 155.1);             /* rise/confirm — decorative use (dots, fills) */
  --down:oklch(58.9% 0.172 30.2);           /* fall — decorative use (dots, fills) */
  /* darkened text-safe variants — --ok/--down fail WCAG AA (4.5:1) as small text on
     --bg/--card; use these for any actual readable copy, mirroring --amber vs --amber-deep */
  --ok-deep:oklch(42% 0.130 155.1);
  --down-deep:oklch(45% 0.172 30.2);

  /* ---- typography (Persian-first; Latin Cormorant serif removed — anti-cliché) ---- */
  --font-display:"IRANYekanX","Vazirmatn",system-ui,sans-serif;
  --serif:var(--font-display); /* compatibility alias for legacy uses of var(--serif) */
  --font:"IRANYekanX","Vazirmatn",system-ui,-apple-system,sans-serif;
  --font-num:"IRANYekanX FaNum","IRANYekanX",system-ui,sans-serif;

  /* ---- corner radius ---- */
  --r-xl:28px;
  --r-lg:20px;
  --r-md:15px;
  --r-sm:10px;

  /* ---- type scale (practical steps spanning the sizes actually used —
     caption through hero display, per DESIGN.md §6). New/updated rules
     should reference these instead of one-off px values. ---- */
  --fs-xs:11px;
  --fs-sm:12.5px;
  --fs-base:14px;
  --fs-md:16px;
  --fs-lg:19px;
  --fs-xl:24px;
  --fs-2xl:32px;
  --fs-display:clamp(28px,3vw,43px);

  /* ---- spacing scale (4px base) — for gap/padding/margin on new rules ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;

  /* ---- shadows (all warm/tonal — never neutral gray) ---- */
  --shadow-sm:0 1px 2px rgba(45,30,8,.05),0 8px 22px -14px rgba(70,48,12,.20);
  --shadow-md:0 2px 8px rgba(45,30,8,.05),0 28px 56px -26px rgba(80,55,16,.30);
  --shadow-lg:0 44px 96px -42px rgba(58,38,10,.46);
  --shadow-amber:0 12px 26px -10px rgba(196,138,22,.50);
  --shadow-garnet:0 12px 26px -10px rgba(120,16,24,.40);

  /* ---- layout ---- */
  --maxw:1200px;

  /* ---- z-index registry — only global "chrome" layers (local 0..6 untouched) ---- */
  --z-nav:20; --z-plate:40; --z-ticker:55; --z-buybar:58;
  --z-header:60; --z-fab:70; --z-popover:75; --z-toast:90;

  /* ---- component palette (value-preserving migration of recurring raw hexes;
     each value is byte-identical to what component CSS used before) ---- */
  --gold-cream:#FCEFCF;    /* warm highlight on gold surfaces */
  --gold-cream-2:#F4E3BE;
  --gold-pale:#F4DFA8;
  --gold-light:#F0C975;
  --gold-bright:#EFC24E;   /* matches the --cube gradient mid-stop */
  --gold-rich:#C9941E;
  --gold-ink-deep:#3A2604; /* darkest ink on gold */
  --cream-2:#FBF3E4;
  --taupe:#C4B49A;         /* warm neutral on noir surfaces */
  --line-warm:#E3DCCF;
  --noir-4:#2A1D14; --noir-5:#1B130D; --noir-6:#130C07;
  --garnet-noir:#3F060C;   /* near-black garnet (cinematic hero) */
  --ok-soft:#E7F6EE;       /* soft rise/fall backgrounds (chips, cards) */
  --down-soft:#FBE9E5;

  /* ---- semantic gold aliases (preferred for new code) ---- */
  --gold:var(--amber);
  --gold-strong:var(--amber-2);
  --gold-deep:var(--amber-deep);
  --gold-soft:var(--amber-soft);

  /* visible focus (accessibility) */
  --focus-ring:0 0 0 3px rgba(227,161,29,.45);
}

/* ============================================================
   Optional dark theme — for surfaces that want the whole page dark.
   Activate: <html data-theme="dark"> or on any section.
   Local noir panels (.noir) are independent of this and stay untouched.
   ============================================================ */
[data-theme="dark"]{
  --bg:#1B130C;
  --panel:#221913;
  --card:#251B12;
  --page-bg:#16100A;
  --line:#3A2C1E;
  --line-2:#4A3826;
  --ink:#F3E8D2;
  --ink-2:#D9CBB3;
  --muted:#A99B83;
  --amber-deep:#E8B65E;   /* gold becomes lighter on a dark background */
  --gold-line:#7A5E2E;
  --ok:#54D08A;
  --down:#F0816E;
  --ok-deep:#54D08A;      /* dark theme already uses a lightened --ok for AA on dark bg */
  --down-deep:#F0816E;
}

/* ============================================================
   Accessibility: consistent focus ring for keyboard navigation.
   Only :focus-visible so a mouse click does not show the ring.
   ============================================================ */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--r-sm);
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}