/* ============================================================
   LuxUp Training — Design tokens (single source of truth)
   v11 dual visual language — deliberately NOT minimalist:
   · Academic:  "progress-book"  · navy #031e3b + gold #c69647
   · Professional: "terminal-ui" · dark teal #0a3d3f + copper #c47f33
   ============================================================ */

:root {
  /* ---------- Academic (progress-book) ---------- */
  --a-navy: #031e3b;
  --a-navy-deep: #021427;
  --a-navy-soft: #0b3560;
  --a-gold: #c69647;
  --a-gold-strong: #a97c31;
  --a-gold-soft: #e8c98d;
  --a-gold-tint: #f7edda;
  --a-paper: #faf6ee;
  --a-line: #e2d5b8;

  /* ---------- Professional (terminal-ui) ---------- */
  --p-teal: #0a3d3f;
  --p-teal-deep: #062b2d;
  --p-teal-soft: #11595c;
  --p-copper: #c47f33;
  --p-copper-strong: #a3661f;
  --p-copper-soft: #e6b075;
  --p-copper-tint: #f9efe0;
  --p-line: #1f5457;
  --p-screen: #0c2e30;

  /* ---------- Shared surfaces ---------- */
  --bg: #ffffff;
  --surface: #f6f8fb;
  --surface-raised: #ffffff;
  --ink: #101d2b;
  --ink-muted: #46586c;
  --border: #dfe6ee;
  --border-strong: #c4cfdd;
  --on-dark: #f2f6fa;
  --on-dark-muted: #b7c5d4;

  /* Status */
  --success: #177245;
  --success-tint: #e7f4ec;
  --selection: #cfe0fd;

  /* ---------- Type ---------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Avenir Next", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9rem;
  --text-base: 1.02rem;
  --text-md: 1.15rem;
  --text-lg: 1.35rem;
  --text-xl: clamp(1.5rem, 2.6vw, 1.9rem);
  --text-hero: clamp(2.5rem, 5.2vw, 4.1rem);

  /* ---------- Space / shape ---------- */
  --space-1: 0.55rem;
  --space-2: 1rem;
  --space-3: 1.6rem;
  --space-4: 2.6rem;
  --space-5: 4rem;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;
  --max-width: 1160px;

  /* ---------- Elevation (layered, rich) ---------- */
  --shadow-s: 0 1px 2px rgba(3, 30, 59, 0.08), 0 2px 8px rgba(3, 30, 59, 0.07);
  --shadow-m: 0 2px 4px rgba(3, 30, 59, 0.09), 0 8px 24px rgba(3, 30, 59, 0.13);
  --shadow-l: 0 4px 10px rgba(3, 30, 59, 0.12), 0 22px 48px rgba(3, 30, 59, 0.2);
  --shadow-gold: 0 10px 30px rgba(198, 150, 71, 0.35);
  --shadow-copper: 0 10px 30px rgba(196, 127, 51, 0.35);

  /* ---------- Gradients ---------- */
  --grad-gold: linear-gradient(120deg, var(--a-gold) 0%, var(--a-gold-soft) 55%, var(--a-gold) 100%);
  --grad-copper: linear-gradient(120deg, var(--p-copper) 0%, var(--p-copper-soft) 55%, var(--p-copper) 100%);
  --grad-navy: linear-gradient(160deg, var(--a-navy) 0%, var(--a-navy-soft) 100%);
  --grad-teal: linear-gradient(160deg, var(--p-teal) 0%, var(--p-teal-soft) 100%);
  --wash-navy: radial-gradient(900px 460px at 12% -10%, rgba(198, 150, 71, 0.22), transparent 62%),
               radial-gradient(760px 420px at 96% 8%, rgba(11, 53, 96, 0.55), transparent 60%),
               linear-gradient(180deg, var(--a-navy) 0%, var(--a-navy-deep) 100%);
  --wash-teal: radial-gradient(880px 440px at 88% -12%, rgba(196, 127, 51, 0.24), transparent 60%),
               radial-gradient(700px 420px at 6% 12%, rgba(17, 89, 92, 0.6), transparent 62%),
               linear-gradient(180deg, var(--p-teal) 0%, var(--p-teal-deep) 100%);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.55s;
}