/* Morgan Wired — Design System Tokens
   Shared by index.html, book.html, admin.html, and any future pages.

   Corporate palette sampled from the Morgan Wired logo:
     deep navy #0C2444 · royal #1D4ED8 · electric #3B82F6 · sky #38BDF8 ·
     bright cyan #22D3EE · teal-mint #5EEAD4

   Theme-aware: dark is the default. [data-theme="light"] swaps the cream/navy set.
   Most colors flow through rgba(var(--accent-rgb), a) so glows/borders adapt per theme. */

:root {
  /* ── Typography ── */
  --display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --serif:   var(--display);   /* legacy alias — headers now use Montserrat, not a serif */

  /* ── Fixed brand palette (used inside gradients) ── */
  --c-navy:   #0c2444;
  --c-royal:  #1d4ed8;
  --c-blue:   #3b82f6;
  --c-sky:    #38bdf8;
  --c-cyan:   #22d3ee;
  --c-mintfx: #5eead4;
  --c-indigo: #6366f1;
  --c-violet: #818cf8;
  --gold:     #fbbf24;

  /* ── Radii ── */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px;
  /* ── Transitions ── */
  --t-fast: 120ms ease; --t-base: 200ms ease; --t-slow: 320ms ease;
  /* ── Section vertical padding ── */
  --section-v: clamp(72px, 8vw, 120px);
  --glass-blur: blur(18px);

  /* ════════════ DARK THEME (default) ════════════ */
  --bg:        #08101f;   /* navy-tinted near-black so the blues glow */
  --bg-2:      #0c1626;
  --bg-3:      #122036;
  --bg-stripe: #0a1322;
  --bg-card:   #0f1b2e;
  --bg-inset:  #122036;

  --border:        #1b2c47;
  --border-subtle: rgba(255,255,255,0.06);
  --border-accent: rgba(34,211,238,0.30);

  --text:   #eef3fb;
  --text-2: #a2b2c9;
  --muted:  #61748f;

  --accent:     #22d3ee;        /* bright cyan */
  --accent-rgb: 34,211,238;
  --accent-dim: #0e5e6e;
  --c-mint:     #67e8f9;        /* accent text (theme-aware) */
  --btn-text:   #04141c;        /* text on the cyan button */

  --grad-brand: linear-gradient(135deg, #22d3ee 0%, #2563eb 100%);
  --grad-ai:    linear-gradient(110deg, #5eead4 0%, #22d3ee 26%, #38bdf8 52%, #3b82f6 76%, #6366f1 100%);
  --grad-text:  linear-gradient(120deg, #eef3fb 0%, #cffafe 38%, #7dd3fc 68%, #a5b4fc 100%);

  --glass-bg:        rgba(255,255,255,0.05);
  --glass-bg-strong: rgba(14,22,38,0.88);   /* opaque-enough now that blur is off */
  --glass-border:    rgba(255,255,255,0.10);
  --card-bg:         rgba(15,24,40,0.86);
  --stripe-grad:     linear-gradient(180deg, rgba(10,18,33,0.0), rgba(10,18,33,0.72) 12%, rgba(10,18,33,0.72) 88%, rgba(10,18,33,0.0));

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.65);
  --glow-green:  0 0 40px rgba(34,211,238,0.35);   /* name kept for compat — now cyan */
  --glow-cyan:   0 0 40px rgba(56,189,248,0.30);
  --glow-indigo: 0 0 48px rgba(99,102,241,0.30);

  --aurora-opacity: 0.9;
  --neural-opacity: 0.6;

  color-scheme: dark;
}

/* ════════════ LIGHT THEME (logo cream) ════════════ */
[data-theme="light"] {
  --bg:        #f4f1ea;   /* logo cream */
  --bg-2:      #ffffff;
  --bg-3:      #e9e4d8;
  --bg-stripe: #efe9dc;
  --bg-card:   #ffffff;
  --bg-inset:  #eef1f6;

  --border:        #ddd5c6;
  --border-subtle: rgba(12,36,68,0.08);
  --border-accent: rgba(14,116,137,0.32);

  --text:   #0c2444;   /* navy */
  --text-2: #44566f;
  --muted:  #8a92a1;

  --accent:     #0e7490;   /* deep teal-cyan — readable on cream as text AND fill */
  --accent-rgb: 14,116,137;
  --accent-dim: #cffafe;
  --c-mint:     #0f766e;
  --btn-text:   #ffffff;

  --grad-brand: linear-gradient(135deg, #0891b2 0%, #1d4ed8 100%);
  --grad-ai:    linear-gradient(110deg, #0f766e 0%, #0891b2 28%, #2563eb 64%, #4f46e5 100%);
  --grad-text:  linear-gradient(120deg, #0c2444 0%, #1d4ed8 52%, #0e7490 100%);

  --glass-bg:        rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.78);
  --glass-border:    rgba(12,36,68,0.12);
  --card-bg:         rgba(255,255,255,0.78);
  --stripe-grad:     linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 12%, rgba(255,255,255,0.6) 88%, rgba(255,255,255,0.0));

  --shadow-sm: 0 1px 3px rgba(12,36,68,0.10);
  --shadow-md: 0 6px 22px rgba(12,36,68,0.12);
  --shadow-lg: 0 16px 44px rgba(12,36,68,0.16);
  --glow-green:  0 10px 30px rgba(12,36,68,0.14);   /* glows → soft shadows on light */
  --glow-cyan:   0 10px 30px rgba(12,36,68,0.12);
  --glow-indigo: 0 12px 34px rgba(12,36,68,0.14);

  --aurora-opacity: 0.4;
  --neural-opacity: 0.2;

  color-scheme: light;
}