/* ============================================================
   Course Student — Design Tokens
   Dark theme on :root, light theme on :root[data-theme="light"]
   ============================================================ */

:root{
  /* Surfaces */
  --bg:#0D0305;
  --bg-2:#0D0305;
  --surface:#1A0608;
  --card:#220810;

  /* Brand */
  --gold:#D4A017;
  --gold-light:#F0C040;
  --gold-soft:rgba(212,160,23,.08);
  --crimson:#7B0D1E;
  --crimson-deep:#5a0916;
  --crimson-action:#B02035;
  --crimson-soft:rgba(176,32,53,.18);

  /* Editorial neutrals — escape the two-color trap */
  --linen:#EDE3D1;
  --linen-soft:rgba(237,227,209,.06);
  --ink-deep:#08070A;
  --crimson-ink:#2B0A10;

  /* Text */
  --text:#FFFFFF;
  --ink:#1A0608;
  --muted:rgba(255,255,255,.62);
  --hint:rgba(255,255,255,.48);

  /* Lines */
  --line:rgba(212,160,23,.14);
  --line-strong:rgba(212,160,23,.32);

  /* Status */
  --green:#5be891;
  --green-soft:rgba(46,204,113,.12);
  --danger:#ff8a9a;
  --danger-soft:rgba(176,32,53,.18);

  /* Form fields — theme-aware so admin modals adapt cleanly */
  --field-bg:rgba(244,239,230,.04);
  --field-bg-focus:rgba(244,239,230,.07);
  --field-text:#FFFFFF;
  --field-placeholder:rgba(255,255,255,.32);
  --field-border:var(--line);
  --field-border-focus:var(--gold);
  --field-ring:rgba(212,160,23,.10);

  /* Editorial accents — legible gold for body text usage */
  --gold-text:var(--gold-light);
  --gold-on-gold:#1A0608;

  /* Modal scrim */
  --scrim:rgba(13,3,5,.78);
  --scrim-blur:6px;

  /* Ambient gradients (used by base.css body::before) */
  --ambient-1: radial-gradient(900px 500px at 90% -10%, rgba(123,13,30,.32), transparent 60%);
  --ambient-2: radial-gradient(700px 600px at -10% 110%, rgba(212,160,23,.08), transparent 65%);

  /* Shadows — multi-layer stacks (close + ambient + tinted + inset rim) */
  --shadow-card:
    0 1px 2px rgba(0,0,0,.45),
    0 8px 16px rgba(0,0,0,.35),
    0 24px 56px rgba(123,13,30,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-elevated:
    0 1px 2px rgba(0,0,0,.55),
    0 12px 24px rgba(0,0,0,.42),
    0 36px 80px rgba(123,13,30,.30),
    inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-gold:
    0 2px 4px rgba(212,160,23,.22),
    0 10px 24px rgba(212,160,23,.30),
    inset 0 1px 0 rgba(255,255,255,.18);
  --shadow-crimson:
    0 2px 4px rgba(176,32,53,.30),
    0 10px 24px rgba(176,32,53,.38),
    inset 0 1px 0 rgba(255,255,255,.10);

  /* Radii */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:22px;

  /* Transitions */
  --t-fast:.2s;
  --t-base:.25s;
  --t-slow:.4s cubic-bezier(.2,.8,.2,1);

  /* Type families — Cairo for UI, Amiri for editorial moments */
  --font-ui:      'Cairo', sans-serif;
  --font-display: 'Amiri', 'Cairo', serif;

  color-scheme: dark;
}

/* ============================================================
   LIGHT THEME — derived from dashboard_light.html
   ============================================================ */
:root[data-theme="light"]{
  --bg:#FFF9F5;
  --bg-2:#FFFFFF;
  --surface:#FFF3EC;
  --card:#FFFFFF;

  --gold:#D4A017;
  --gold-light:#F0C040;
  --gold-soft:#FBF1D6;
  --crimson:#7B0D1E;
  --crimson-deep:#5a0916;
  --crimson-action:#B02035;
  --crimson-soft:#FCE7EA;

  /* Editorial neutrals (light) */
  --linen:#7A6A4B;
  --linen-soft:rgba(122,106,75,.08);
  --ink-deep:#1A0608;
  --crimson-ink:#4A1018;

  --text:#1A0608;
  --ink:#1A0608;
  --muted:#5A4244;
  --hint:#7A6063;

  --line:rgba(123,13,30,.14);
  --line-strong:rgba(212,160,23,.45);

  --green:#1F8A47;
  --green-soft:#E6F7EC;
  --danger:var(--crimson-action);
  --danger-soft:rgba(176,32,53,.10);

  /* Form fields */
  --field-bg:#FFFFFF;
  --field-bg-focus:#FFF9F5;
  --field-text:var(--ink);
  --field-placeholder:#9A8484;
  --field-border:rgba(123,13,30,.16);
  --field-border-focus:var(--crimson);
  --field-ring:rgba(123,13,30,.10);

  /* Editorial accents — deeper gold for legibility on cream */
  --gold-text:#8A6810;
  --gold-on-gold:#1A0608;

  /* Modal scrim — softer crimson-tinted blur */
  --scrim:rgba(26,6,8,.32);
  --scrim-blur:8px;

  --ambient-1: radial-gradient(800px 500px at 90% -10%, rgba(212,160,23,.18), transparent 60%);
  --ambient-2: radial-gradient(700px 600px at -10% 110%, rgba(123,13,30,.06), transparent 65%);

  --shadow-card:
    0 1px 2px rgba(123,13,30,.06),
    0 6px 14px rgba(123,13,30,.07),
    0 22px 48px rgba(123,13,30,.10),
    inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-elevated:
    0 1px 2px rgba(123,13,30,.08),
    0 10px 22px rgba(123,13,30,.10),
    0 32px 70px rgba(123,13,30,.14),
    inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-gold:
    0 2px 4px rgba(212,160,23,.18),
    0 10px 24px rgba(212,160,23,.26),
    inset 0 1px 0 rgba(255,255,255,.55);
  --shadow-crimson:
    0 2px 4px rgba(176,32,53,.18),
    0 10px 22px rgba(176,32,53,.22),
    inset 0 1px 0 rgba(255,255,255,.45);

  color-scheme: light;
}