/* ============================================================================
   VitrinCar — DESIGN TOKENS  (the site's CSS framework core)
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for every colour that differs between light and dark.
   Nothing else in the codebase may define a theme palette. If a colour needs to
   change between themes, it gets a token HERE — never a per-page override.

   ── Why the selectors look like this ────────────────────────────────────────
   `html:root` is specificity (0,2,0); a bare `:root` is (0,1,0). The legacy
   sheets (assets/css/home.css, vc-light.css, per-page inline <style>) all use
   bare `:root` / `html.vc-light`, so this file wins over them REGARDLESS of
   load order. That is deliberate: the old bugs came from palettes duelling on
   equal specificity where whichever <link> happened to load last won.

   ── Theme mechanisms ────────────────────────────────────────────────────────
   Three shipped over time and disagreed with each other:
     A) html.vc-light            (localStorage 'vc-theme')
     B) body[data-theme=light]   (localStorage 'mp_theme')
     C) server marketplace_theme_mode
   inc/theme_boot.php now drives all of them from ONE decision, and this file
   resolves A and B to the same values so legacy pages stay correct while they
   are migrated. Do not add a fourth.

   ── Layers ─────────────────────────────────────────────────────────────────
     1. brand primitives — identical in both themes (accents, radii, fonts)
     2. semantic tokens  — the per-theme surfaces/text/borders
     3. legacy aliases   — old bare names (--bg/--panel/--text/…) mapped onto
                           layer 2, so the ~4,900 existing var() call sites in
                           the codebase become theme-aware with no page edits.
   Layer 3 shrinks as pages migrate to --vc-* directly. It is scaffolding.
   ============================================================================ */


/* ══ LAYER 1 ══ brand primitives — theme-independent ═══════════════════════ */
html:root{
  /* Accents read well on both themes, so they are NOT themed. */
  --vc-brand:#7c5cff;
  --vc-brand-2:#5b3df0;
  --vc-brand-ink:#ffffff;          /* text on a brand-filled surface */
  --vc-pink:#ff4e7d;
  --vc-blue:#3da9fc;
  --vc-gold:#f5a623;
  --vc-success:#22c55e;
  --vc-warning:#f59e0b;
  --vc-danger:#ef4444;

  --vc-r-sm:12px;
  --vc-r:16px;
  --vc-r-lg:22px;
  --vc-radius:22px;                /* legacy name used by the mega-menu CSS */

  /* STANDING RULE: Inter + Vazirmatn everywhere. Never Sora/Manrope. */
  --vc-ui:'Inter',system-ui,sans-serif;
  --vc-display:'Inter',system-ui,sans-serif;
}
html:root[dir="rtl"]{
  /* STANDING RULE: fa/ar always render in Vazirmatn. */
  --vc-ui:'Vazirmatn','Inter',system-ui,sans-serif;
  --vc-display:'Vazirmatn','Inter',sans-serif;
}


/* ══ LAYER 2 ══ semantic tokens ════════════════════════════════════════════ */

/* ---- DARK (the default; the site's original design) ---------------------- */
html:root{
  color-scheme:dark;

  --vc-bg:#070b18;                 /* page base */
  --vc-bg-2:#0a1224;               /* raised page base / striped rows */
  --vc-bg-soft:#091225;

  --vc-surface:#0e1730;            /* cards, panels, sheets */
  --vc-surface-2:#121d3b;          /* nested surface, inputs, chips */
  --vc-surface-3:#182449;          /* hover on a nested surface */
  --vc-surface-glass:rgba(20,28,55,.50);
  --vc-surface-soft:rgba(14,22,41,.82);

  --vc-border:rgba(140,156,196,.12);
  --vc-border-strong:rgba(140,156,196,.22);

  --vc-text:#eef2fb;               /* primary copy — 13.5:1 … 17.5:1 */
  --vc-muted:#9aa6c4;              /* secondary copy — 6.2:1 … 8.1:1 */
  /* Was #6b7794, which measured 3.38:1 on --vc-surface-3 and 3.96:1 on
     --vc-surface — under the 4.5:1 body-text floor on every surface it is
     actually used on. Lightened to clear 4.5:1 across all five dark surfaces
     (now 5.05:1 … 6.54:1) per the standing contrast rule. */
  --vc-faint:#8b95ad;              /* tertiary — 5.1:1 … 6.5:1 */
  --vc-text-invert:#0b1220;        /* copy on an inverted surface */

  --vc-shadow:0 24px 60px -20px rgba(0,0,0,.75);
  --vc-shadow-sm:0 10px 26px -14px rgba(0,0,0,.7);
  --vc-glow:0 0 38px rgba(124,92,255,.30);

  /* Scrims sit on photography and stay dark in BOTH themes by design. */
  --vc-scrim:rgba(6,10,22,.62);
  --vc-scrim-strong:rgba(6,10,22,.82);

  /* Form controls — these were the worst light-mode offenders. */
  --vc-field-bg:#121d3b;
  --vc-field-border:rgba(140,156,196,.22);
  --vc-field-text:#eef2fb;
  --vc-field-placeholder:#6b7794;
  --vc-field-bg-focus:#16224a;
  --vc-focus-ring:rgba(124,92,255,.45);

  /* Tinted accent surfaces (badge/pill backgrounds over the page, not photos) */
  --vc-brand-soft:rgba(124,92,255,.16);
  --vc-brand-soft-2:rgba(124,92,255,.26);
  --vc-brand-text:#b9a6ff;         /* brand-coloured TEXT — legible on dark */
  --vc-success-soft:rgba(34,197,94,.16);
  --vc-danger-soft:rgba(239,68,68,.16);
  --vc-warning-soft:rgba(245,166,35,.16);

  /* STATUS TEXT. The soft fills above are backgrounds; the copy that sits on
     them was hardcoded per page (#ffd2d2 / #eafaf0 / #ffe6bd — all dark-mode
     tints that vanish on a light alert). Measured on --vc-danger-soft over a
     card: 10.3:1 / 11.4:1 / 10.0:1 dark, 5.0:1 / 5.3:1 / 5.1:1 light. */
  --vc-danger-text:#ffd2d2;
  --vc-success-text:#eafaf0;
  --vc-warning-text:#ffe6bd;

  /* ELEVATION OVERLAYS — the single biggest light-mode defect in the codebase.
     1,939 hardcoded rgba(255,255,255,α) fills are used to raise a surface off
     the dark page. On a light page a white veil over white is INVISIBLE, so
     every one of those cards/pills/rows lost its edges in light mode.
     Named by their alpha so the migration from the literal is exact. */
  --vc-elev-015:rgba(255,255,255,.015);
  --vc-elev-02:rgba(255,255,255,.02);
  --vc-elev-025:rgba(255,255,255,.025);
  --vc-elev-03:rgba(255,255,255,.03);
  --vc-elev-04:rgba(255,255,255,.04);
  --vc-elev-05:rgba(255,255,255,.05);
  --vc-elev-06:rgba(255,255,255,.06);
  --vc-elev-07:rgba(255,255,255,.07);
  --vc-elev-08:rgba(255,255,255,.08);
  --vc-elev-10:rgba(255,255,255,.10);
  --vc-elev-12:rgba(255,255,255,.12);
  --vc-elev-14:rgba(255,255,255,.14);
  --vc-elev-16:rgba(255,255,255,.16);
  --vc-elev-18:rgba(255,255,255,.18);
  --vc-elev-20:rgba(255,255,255,.20);
  /* CONSTRAINT: at .24 this stops being a veil and becomes a bright panel.
     In dark mode only --vc-text is legible on it (7.3:1); --vc-muted measures
     3.4:1 and --vc-faint 2.7:1. Both current uses are safe — a 1px divider
     with no text, and a button hover whose label is --vc-text. Do not put
     secondary or tertiary copy on this one. */
  --vc-elev-24:rgba(255,255,255,.24);

  /* PANEL GRADIENT PAIR — always used together, never individually.
     390 two-stop "dark panel" gradients exist across the site. Mapping their
     stops to independent surface tokens collapsed them into flat fills (both
     stops resolved to the same colour) — so the pair below is defined as a
     relationship: -a is always the LIGHTER stop, -b the darker, in BOTH themes.
     The migrator picks the order per gradient so the original direction and
     the light→dark relationship survive the theme switch. */
  --vc-panel-grad-a:#131f3e;
  --vc-panel-grad-b:#0c1428;

  /* STATUS INK (added 2026-09-09, marker vc-tokens-layer3-ext-v1). Pages
     hardcoded the Tailwind-400 tints (#4ade80/#f87171/#fbbf24/#60a5fa) as
     `--ok/--bad/--warn/--blue` in their own :root — legible on dark, ~1.5:1
     on white. These carry the same dark values and a darkened light set. */
  --vc-ok:#4ade80;
  --vc-bad:#f87171;
  --vc-warn:#fbbf24;
  --vc-info:#60a5fa;
}

/* ---- LIGHT ---------------------------------------------------------------
   Both legacy switches resolve here, so a page using either mechanism — or a
   page mid-migration using both — gets ONE consistent palette.
   Contrast target: body copy ≥ 7:1, secondary ≥ 4.5:1 on --vc-bg.
   (owner: "تضاد رنگ‌ها رو بیشتر بکن تو حالت وایت")                          */
html:root.vc-light,
html:root[data-theme="light"],
html:root body[data-theme="light"]{
  color-scheme:light;

  --vc-bg:#e7ebf4;
  --vc-bg-2:#f2f4fa;
  --vc-bg-soft:#eef1f8;

  --vc-surface:#ffffff;
  --vc-surface-2:#eef1f8;
  --vc-surface-3:#e4e9f4;
  --vc-surface-glass:rgba(255,255,255,.86);
  --vc-surface-soft:rgba(255,255,255,.92);

  --vc-border:rgba(16,32,64,.16);
  --vc-border-strong:rgba(16,32,64,.24);

  --vc-text:#0b1220;
  --vc-muted:#414f66;
  --vc-faint:#5a6884;
  --vc-text-invert:#ffffff;

  --vc-shadow:0 22px 50px -24px rgba(16,32,64,.32);
  --vc-shadow-sm:0 10px 24px -16px rgba(16,32,64,.28);
  --vc-glow:0 0 30px rgba(124,92,255,.16);

  /* Scrims deliberately stay dark — they overlay photos in both themes. */
  --vc-scrim:rgba(6,10,22,.55);
  --vc-scrim-strong:rgba(6,10,22,.78);

  --vc-field-bg:#ffffff;
  --vc-field-border:rgba(16,32,64,.24);
  --vc-field-text:#0f1729;
  --vc-field-placeholder:#7a869e;
  --vc-field-bg-focus:#faf9ff;
  --vc-focus-ring:rgba(124,92,255,.40);

  --vc-brand-soft:rgba(124,92,255,.12);
  --vc-brand-soft-2:rgba(124,92,255,.22);
  --vc-brand-text:#5b34c9;         /* darkened — #7c5cff fails contrast on white */
  --vc-success-soft:rgba(34,197,94,.14);
  --vc-danger-soft:rgba(239,68,68,.12);
  --vc-warning-soft:rgba(245,166,35,.16);

  /* Same three, darkened for light. The dark tints measured ~1.1:1 here. */
  --vc-danger-text:#b42318;
  --vc-success-text:#0f6b35;
  --vc-warning-text:#8a5300;

  /* Same elevation steps, inverted to a navy-tinted ink so raised surfaces keep
     their separation on light. Alphas are ~0.6× their dark counterparts: dark
     ink on a light surface reads noticeably stronger than white on dark at the
     same alpha, so a 1:1 copy would look heavy and dirty. */
  --vc-elev-015:rgba(16,32,64,.014);
  --vc-elev-02:rgba(16,32,64,.018);
  --vc-elev-025:rgba(16,32,64,.024);
  --vc-elev-03:rgba(16,32,64,.030);
  --vc-elev-04:rgba(16,32,64,.035);
  --vc-elev-05:rgba(16,32,64,.040);
  --vc-elev-06:rgba(16,32,64,.045);
  --vc-elev-07:rgba(16,32,64,.050);
  --vc-elev-08:rgba(16,32,64,.055);
  --vc-elev-10:rgba(16,32,64,.065);
  --vc-elev-12:rgba(16,32,64,.075);
  --vc-elev-14:rgba(16,32,64,.085);
  --vc-elev-16:rgba(16,32,64,.100);
  --vc-elev-18:rgba(16,32,64,.110);
  --vc-elev-20:rgba(16,32,64,.120);
  --vc-elev-24:rgba(16,32,64,.140);

  /* Same pair, light. -a stays the lighter stop so every migrated gradient
     keeps pointing the same way it did in dark mode. The two are kept close
     together: a strong gradient that reads as depth on dark reads as dirt on
     light, so the light pair is a gentle white→off-white wash. */
  --vc-panel-grad-a:#ffffff;
  --vc-panel-grad-b:#eef1f8;

  /* Status ink, light: 700-weight so text AND white-on-fill both pass. */
  --vc-ok:#15803d;
  --vc-bad:#b91c1c;
  --vc-warn:#b45309;
  --vc-info:#1d4ed8;
}


/* ══ LAYER 3 ══ legacy aliases (scaffolding — shrinks as pages migrate) ═════
   The old bare names are re-declared on every scope that can carry a theme,
   so they re-resolve against whichever --vc-* value won there. Declaring them
   only on :root would bake in the dark value and break body-scoped light.    */
html:root,
html:root.vc-light,
html:root[data-theme],
html:root body[data-theme]{
  /* surfaces — from assets/css/home.css :root */
  --bg:var(--vc-bg);
  --bg-2:var(--vc-bg-2);
  --bg2:var(--vc-bg-2);            /* typo'd variant that shipped in theme_boot */
  --panel:var(--vc-surface);
  --panel-2:var(--vc-surface-2);
  --panel-glass:var(--vc-surface-glass);
  --panel-soft:var(--vc-surface-soft);
  --card:var(--vc-surface);
  --chip:var(--vc-surface-2);
  --glass:var(--vc-surface-glass);

  /* borders */
  --border:var(--vc-border);
  --border-2:var(--vc-border-strong);
  --border-soft:var(--vc-border);
  --line:var(--vc-border);
  --line-2:var(--vc-border-strong);
  --bd:var(--vc-border);
  --bd2:var(--vc-border-strong);

  /* text */
  --text:var(--vc-text);
  --muted:var(--vc-muted);
  --faint:var(--vc-faint);
  --text-mute:var(--vc-muted);
  --text-dim:var(--vc-faint);

  /* accents */
  --p:var(--vc-brand);
  --p2:var(--vc-brand-2);
  --pi:var(--vc-pink);
  --blue:var(--vc-blue);
  --gold:var(--vc-gold);
  --primary:var(--vc-brand);
  --primary-2:var(--vc-brand-2);
  --danger:var(--vc-danger);

  /* depth */
  --shadow:var(--vc-shadow);
  --glow:var(--vc-glow);

  /* geometry + type */
  --r-sm:var(--vc-r-sm);
  --r:var(--vc-r);
  --r-lg:var(--vc-r-lg);
  --ui:var(--vc-ui);
  --display:var(--vc-display);

  /* --vc-* names that three component sheets pinned to dark literals
     (account-menu.css, available-cars-menu.css, showroom-mobile-redesign.css).
     Re-pointed at the themed tokens so those menus follow the theme. */
  --vc-panel:var(--vc-surface);
  --vc-panel-2:var(--vc-surface-2);
  --vc-panel-soft:var(--vc-surface-soft);
  --vc-primary:var(--vc-brand);
  --vc-primary-2:var(--vc-brand-2);
}


/* ══ LAYER 3b ══ alias extension — marker vc-tokens-layer3-ext-v1 ══════════
   2026-09-09 site-wide audit: 42+ pages still declare their OWN palette in a
   bare `:root{}` using names Layer 3 did not cover (`--txt`, `--mut`, `--card`,
   `--ok`, `--bad`, …). Layer 3 flipped their `--bg`/`--panel` to the light
   surfaces but left `--txt:#e8eef9` / `--mut:#8a98ad` at the dark literal, so
   those pages rendered light-on-light in light mode (auction.php, my-bids.php,
   my-activity.php, dealer-map.php, …). Same mechanism as Layer 3: declared on
   `html:root` so the page's bare `:root` loses on specificity in BOTH themes.
   NOT aliased on purpose: `--r`, `--g`, `--a`, `--p` (numeric inline uses:
   star ratings, progress), `--side`/`--nav` (some sidebars are dark by design),
   accent names (`--accent`, `--brand2`, `--pink`, `--gold`, `--orange`,
   `--purple*`) — accents are theme-independent and per-page by design. */
html:root,
html:root.vc-light,
html:root[data-theme],
html:root body[data-theme]{
  /* text */
  --txt:var(--vc-text);
  --ink:var(--vc-text);
  --text-2:var(--vc-muted);
  --mut:var(--vc-muted);
  --muted-2:var(--vc-faint);
  --muted2:var(--vc-faint);
  --mut2:var(--vc-faint);

  /* surfaces */
  --card:var(--vc-surface);
  --card2:var(--vc-surface-2);
  --card-2:var(--vc-surface-2);
  --surface:var(--vc-surface);
  --panel2:var(--vc-surface-2);
  --bg-soft:var(--vc-bg-soft);

  /* borders */
  --line2:var(--vc-border-strong);

  /* status ink (themed — see Layer 2) */
  --ok:var(--vc-ok);
  --good:var(--vc-ok);
  --success:var(--vc-ok);
  --green:var(--vc-ok);
  --bad:var(--vc-bad);
  --red:var(--vc-bad);
  --err:var(--vc-bad);
  --warn:var(--vc-warn);
  --warning:var(--vc-warn);

  /* soft tints */
  --success-bg:var(--vc-success-soft);
  --green-soft:var(--vc-success-soft);
  --primary-soft:var(--vc-brand-soft);
}


/* ══ BASE ══ the two rules every page needs to actually repaint ════════════ */
html:root{
  background:var(--vc-bg);
  color:var(--vc-text);
}
html:root body{
  background:var(--vc-bg);
  color:var(--vc-text);
}

/* Native widgets (scrollbars, date pickers, autofill) follow the theme too —
   these are a common source of "one white box on a dark page". */
html:root ::placeholder{color:var(--vc-field-placeholder);opacity:1}
html:root :focus-visible{outline:2px solid var(--vc-focus-ring);outline-offset:2px}

/* Respect reduced-motion for the theme cross-fade added by theme_boot. */
@media (prefers-reduced-motion:reduce){
  html:root.vc-theme-anim, html:root.vc-theme-anim *{transition:none!important}
}