/* ============================================================
   Theme 3 — "Ember": token overrides only.

   Scoped under [data-theme="ember"] so Theme 1 ("Classic") and Theme 2
   ("Nova") are completely untouched. Ember — not Classic, not Nova — is what
   a fresh visitor actually gets as of 2026-08-30: see state/theme.js's
   DEFAULT_THEME and index.html's boot script, both of which resolve to
   'ember' when nothing is stored yet.

   The look: a cinema-lobby palette — deep, almost-black ground with a muted
   brick-red ember glow bleeding in only faintly from the top; gilded, warm
   (not lemon) hairlines around every surface; a deep, slightly desaturated
   brick red as the *fill* accent (buttons, active pills, the selected nav
   tab) and a muted warm gold as the *text/icon* accent.

   That red/gold split is deliberate and is why this file needs almost no
   structural help to re-colour the app: the existing component CSS already
   uses `--color-accent` wherever it paints a filled surface and
   `--color-accent-strong` wherever it tints text or an icon, so mapping
   accent -> crimson and accent-strong -> gold lands each in the right place
   for free. Anything a token swap genuinely can't reach (the nav's own
   background, the hero deck's geometry, the bottom dock's labels, glyphs that
   only this theme renders) lives in theme-ember.css.

   **Re-tuned 2026-08-30, twice.** First pass: notably less saturated/neon
   than the very first draft. Second pass (this one): calibrated against
   *actual pixel samples* read out of the reference screenshots
   (`screenshots/1.jpg`/`3.jpg` — `2.jpg` went missing from the repo between
   sessions) via an offscreen `<canvas>` + `getImageData()`, not eyeballing —
   see the button/pill fill colour below for what that changed. Colour values
   only in both passes — nothing structural. ---------------- */

:root[data-theme='ember'] {
  /* ---------- Surfaces ---------- */
  /* `--color-surface`'s own pixel sample (an icon button's fill, and a
     filter pill's fill, in two different screenshots) reads essentially
     achromatic — rgb(22–30, 22–30, 18–28), no meaningful red cast at all.
     That surprised the first pass, which had warmed these toward maroon;
     corrected here to genuinely neutral dark grays with only a whisper of
     warmth, matching what was actually measured. */
  --color-bg: #0a0808;
  --color-bg-elevated: #161514;
  --color-surface: #1e1c1a;
  --color-surface-hover: #2a2725;
  --color-surface-raised: #201e1c;

  /* Hairlines are gold, not white — the single strongest signal of this
     theme, present on every card, pill, chip and dock in the reference.
     rgb(216, 162, 111) sampled directly off a card's border stroke (a clean,
     large, JPEG-safe read — the most reliable sample of the whole pass). */
  --color-border: rgba(216, 162, 111, 0.22);
  --color-border-strong: rgba(216, 162, 111, 0.42);
  --color-border-hairline: rgba(216, 162, 111, 0.11);

  /* ---------- Text ---------- */
  --color-text: #f5efe6;
  --color-text-secondary: #ad9d92;
  --color-text-tertiary: #796a61;

  /* ---------- Accents ----------
     `--color-accent` is the *fill* (buttons, active pills, the nav's selected
     tab); `--color-accent-strong` is the *text/icon* accent. See the file
     header for why that split matters.

     Both values below are read directly off the reference screenshots via
     canvas pixel sampling, not eyeballed: the play-circle/download-button/
     active-pill fill sampled a remarkably consistent rgb(107–121, 17–27,
     16–24) across three independent buttons in two different screenshots —
     a genuinely dark, desaturated brick red, well short of "crimson." The
     card border (a clean, large, JPEG-safe stroke) sampled rgb(216, 162,
     111) — confirming the gold was already close and needed no real
     change. */
  --color-accent: #74160f;
  --color-accent-strong: #d6a56c;
  --color-accent-2: #8a231f;
  --color-accent-contrast: #f7ecdc;

  /* Named aliases used by theme-ember.css so its rules read as "gold"/"ember"
     rather than re-deriving them from the accent pair every time. */
  --ember-gold: #d6a56c;
  --ember-gold-bright: #e8c286;
  --ember-red: #74160f;
  /* Sampled separately from `--ember-red`: the hero's "فیلم"/"سریال" type
     badge and the calendar's episode-number chip read a distinctly *darker*
     maroon than the CTA buttons/active pills (rgb(54–56, 10–12, 8–9) at
     clean, unblended points) — two different depths of the same hue, not
     one colour reused. */
  --ember-red-deep: #300a06;

  /* A shallow ramp on purpose: the reference's filled pills read as a flat,
     muted brick red with just enough falloff to give the capsule a lit top
     edge — a steeper gradient turns a wide button (the title page's
     full-width "Watch Now") muddy toward the bottom. */
  --gradient-accent: linear-gradient(180deg, #82201a 0%, #5c0f0b 100%);
  --gradient-accent-soft: linear-gradient(180deg, rgba(116, 22, 15, 0.22) 0%, rgba(70, 14, 10, 0.1) 100%);
  --gradient-gold-line: linear-gradient(90deg, transparent 0%, rgba(214, 165, 108, 0.45) 22%, rgba(214, 165, 108, 0.45) 78%, transparent 100%);
  --gradient-surface-sheen: linear-gradient(180deg, rgba(240, 224, 200, 0.04) 0%, rgba(240, 224, 200, 0) 42%);

  --color-rating: #d8a26f;
  --color-danger: #e2645f;
  --color-success: #57c785;

  /* ---------- Typography ----------
     Slightly heavier and tighter than the base scale — the reference sets its
     titles in a bold grotesque, and Persian display text needs a touch more
     size than Latin at the same optical weight. */
  --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --fs-xl: clamp(1.35rem, 1.12rem + 1.1vw, 1.85rem);
  --fs-2xl: clamp(1.8rem, 1.42rem + 1.9vw, 2.6rem);
  --fs-3xl: clamp(2.3rem, 1.72rem + 2.9vw, 3.6rem);

  /* ---------- Radii ----------
     Softer than Classic, squarer than Nova: cards and dock are generous
     rounded rects, every pill/chip is a full capsule. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.32, 1.24, 0.6, 1);
  --ease-flat: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --duration-slow: 440ms;

  /* ---------- Shadows ----------
     Deep black drops plus a gold hairline, rather than Classic's plain
     black-only elevation. */
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.62);
  --shadow-card-hover: 0 20px 44px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(214, 165, 108, 0.36), 0 0 20px rgba(116, 22, 15, 0.18);
  --shadow-elevated: 0 26px 64px rgba(0, 0, 0, 0.74), 0 0 0 1px rgba(214, 165, 108, 0.12);
  --shadow-glow: 0 8px 20px rgba(116, 22, 15, 0.4);
  --shadow-glow-soft: 0 4px 12px rgba(116, 22, 15, 0.22);
  --shadow-gold-ring: inset 0 0 0 1px rgba(224, 181, 116, 0.58);
  --shadow-inset-hairline: inset 0 1px 0 rgba(240, 224, 200, 0.06);

  /* ---------- Layout ----------
     The dock keeps a label under every icon in this theme, so it stands
     taller than Classic's icon-only pill and needs more clearance under the
     last rail. */
  --bottom-nav-clearance: calc(6.25rem + env(safe-area-inset-bottom));
  --hero-radius: clamp(1.1rem, 3.4vw, 1.5rem);
  --card-width: clamp(8.5rem, 33vw, 12rem);
  --card-width-sm: clamp(7rem, 27vw, 9.5rem);
  --ex-card-min: clamp(7rem, 30vw, 10.5rem);
}