/* VORVEX LEARNING — VISUAL SYSTEM V3
   Central design tokens shared by index.php and student/mission.php.
   Two modes of the same product:
     [data-learning-theme="adventure"] — light, friendly, premium (explore/practice)
     [data-learning-theme="mission"]   — dark, cinematic, premium (investigate/resolve)
   Default (:root, no attribute) resolves to the mission palette so any
   page/section that doesn't opt in keeps today's dark look unchanged.

   IMPORTANT: the legacy aliases (--bg, --surface, --green…) are redeclared
   inside EVERY block below, not just :root. A custom property that reads
   var(--lt-x) resolves --lt-x using the cascade AT THE ELEMENT WHERE THE
   ALIAS ITSELF IS DECLARED — it is not a live reference re-evaluated per
   descendant. Declaring the alias once at :root and overriding only the
   --lt-x tokens deeper in the tree does NOT retheme it; the alias has to be
   recomputed at the same scope as the --lt-x override.

   --lt-ambient is a SEPARATE token from --bg on purpose: --bg stays a flat
   color because it's also used as a plain border/divider color (e.g. the
   fraction-bar segment dividers) where a multi-layer gradient would be an
   invalid value and silently drop the declaration. Only `body{background}`
   composites --lt-ambient on top of --bg. */

:root{
  --lt-bg:#060911;
  --lt-surface:#0b101b;
  --lt-surface-elevated:#121c2d;
  --lt-text:#f5f7fb;
  --lt-text-muted:#8493a7;
  --lt-accent:#31e6b0;
  --lt-accent-2:#667cff;
  --lt-border:#1c293c;
  --lt-success:#31e6b0;
  --lt-warning:#ffcb6b;
  --lt-danger:#ff657e;
  --lt-shadow:0 20px 60px rgba(0,0,0,.45);
  --lt-radius:20px;
  --lt-header:rgba(6,9,17,.92);
  --lt-progress:linear-gradient(90deg,#31e6b0,#667cff);
  --lt-sunken:#141d2c;
  --lt-option-bg:#0d1724;
  --lt-option-border:#26364c;
  --lt-option-text:#dce4ee;
  --lt-success-bg:#0d211b;
  --lt-success-border:#2f6d5b;
  --lt-success-text:#bdf4e3;
  --lt-danger-bg:#22111a;
  --lt-danger-border:#703246;
  --lt-danger-text:#ffc3cf;
  --lt-input-bg:#0b121d;
  --lt-input-border:#2a3c58;
  --lt-panel-bg:#131127;
  --lt-panel-border:#40356a;
  --lt-text-soft:#c7d0dc;
  --lt-purple:#9a71ff;
  --lt-ambient:radial-gradient(circle at 78% -8%,rgba(102,124,255,.10),transparent 34%),radial-gradient(circle at 6% 100%,rgba(154,113,255,.08),transparent 36%);

  --bg:var(--lt-bg);
  --surface:var(--lt-surface);
  --surface2:var(--lt-surface);
  --surface3:var(--lt-surface-elevated);
  --line:var(--lt-border);
  --text:var(--lt-text);
  --muted:var(--lt-text-muted);
  --green:var(--lt-accent);
  --blue:var(--lt-accent-2);
  --amber:var(--lt-warning);
  --danger:var(--lt-danger);
  --ok:var(--lt-accent);
  --purple:var(--lt-purple);
}

/* `color`/`background` are normal (non-custom) properties: substituting
   var(--text) into them happens once, at computed-value time, at whichever
   element declares them — then that RESOLVED value is what inherits down.
   body{color:var(--text)} above :root only ever sees the default palette,
   so anywhere a theme attribute lands on a element deeper than body (as it
   does on #home/#catalog/#progress) needs its own fresh color/background
   declaration right here, or every text node under it silently keeps the
   old resolved color no matter what --text becomes below. */
[data-learning-theme]{color:var(--text);background:var(--lt-ambient),var(--bg)}

[data-learning-theme="mission"]{
  --lt-bg:#05070d;
  --lt-surface:#0b101b;
  --lt-surface-elevated:#131b2b;
  --lt-text:#f5f7fb;
  --lt-text-muted:#8493a7;
  --lt-accent:#31e6b0;
  --lt-accent-2:#667cff;
  --lt-border:#1c293c;
  --lt-success:#31e6b0;
  --lt-warning:#ffcb6b;
  --lt-danger:#ff657e;
  --lt-shadow:0 24px 70px rgba(0,0,0,.55);
  --lt-radius:20px;
  --lt-header:rgba(5,7,13,.9);
  --lt-progress:linear-gradient(90deg,#31e6b0,#667cff);
  --lt-sunken:#141d2c;
  --lt-option-bg:#0d1724;
  --lt-option-border:#26364c;
  --lt-option-text:#dce4ee;
  --lt-success-bg:#0d211b;
  --lt-success-border:#2f6d5b;
  --lt-success-text:#bdf4e3;
  --lt-danger-bg:#22111a;
  --lt-danger-border:#703246;
  --lt-danger-text:#ffc3cf;
  --lt-input-bg:#0b121d;
  --lt-input-border:#2a3c58;
  --lt-panel-bg:#131127;
  --lt-panel-border:#40356a;
  --lt-text-soft:#c7d0dc;
  --lt-purple:#9a71ff;
  --lt-ambient:radial-gradient(circle at 82% -10%,rgba(102,124,255,.16),transparent 32%),radial-gradient(circle at 4% 18%,rgba(154,113,255,.12),transparent 30%),radial-gradient(circle at 90% 92%,rgba(49,230,176,.06),transparent 30%);

  --bg:var(--lt-bg);
  --surface:var(--lt-surface);
  --surface2:var(--lt-surface);
  --surface3:var(--lt-surface-elevated);
  --line:var(--lt-border);
  --text:var(--lt-text);
  --muted:var(--lt-text-muted);
  --green:var(--lt-accent);
  --blue:var(--lt-accent-2);
  --amber:var(--lt-warning);
  --danger:var(--lt-danger);
  --ok:var(--lt-accent);
  --purple:var(--lt-purple);
}

[data-learning-theme="adventure"]{
  --lt-bg:#f5f7fc;
  --lt-surface:#ffffff;
  --lt-surface-elevated:#ffffff;
  --lt-text:#151b2c;
  --lt-text-muted:#657085;
  --lt-accent:#18b98a;
  --lt-accent-2:#5064e6;
  --lt-border:#e6eaf3;
  --lt-success:#18b98a;
  --lt-warning:#d99a2b;
  --lt-danger:#e0546c;
  --lt-shadow:0 16px 40px rgba(30,41,71,.09);
  --lt-radius:24px;
  --lt-header:rgba(245,247,252,.92);
  --lt-progress:linear-gradient(90deg,#18b98a,#5064e6);
  --lt-sunken:#eef1f7;
  --lt-option-bg:#f7f9fc;
  --lt-option-border:#e2e7f0;
  --lt-option-text:#1b2436;
  --lt-success-bg:#e6f7f1;
  --lt-success-border:#a8e6cf;
  --lt-success-text:#0d6b4f;
  --lt-danger-bg:#fdecef;
  --lt-danger-border:#f3b8c4;
  --lt-danger-text:#b23350;
  --lt-input-bg:#ffffff;
  --lt-input-border:#dbe1ec;
  --lt-panel-bg:#f1eefc;
  --lt-panel-border:#d8cdf7;
  --lt-text-soft:#4c5468;
  --lt-purple:#7c5cd6;
  --lt-ambient:radial-gradient(circle at 88% -10%,rgba(24,185,138,.12),transparent 34%),radial-gradient(circle at 4% 8%,rgba(80,100,230,.09),transparent 32%),radial-gradient(circle at 15% 100%,rgba(124,92,214,.07),transparent 34%);

  --bg:var(--lt-bg);
  --surface:var(--lt-surface);
  --surface2:var(--lt-surface);
  --surface3:var(--lt-surface-elevated);
  --line:var(--lt-border);
  --text:var(--lt-text);
  --muted:var(--lt-text-muted);
  --green:var(--lt-accent);
  --blue:var(--lt-accent-2);
  --amber:var(--lt-warning);
  --danger:var(--lt-danger);
  --ok:var(--lt-accent);
  --purple:var(--lt-purple);
}