/* Coexa Ruby Showcase — locked design tokens (Direction B, Playful SaaS)
   Picked by Joe over Clinical Premium / Editorial Minimal, 2026-09-11.
   2026-09-12: the marketing canvas (everything outside a device screen —
   page background, headlines, floating glass chrome) went dark. Every
   Liquid Glass reference Joe supplied is dark, translucent glass with light
   text over rich color — a light-tinted card never reads as that material
   no matter how much blur is added. The product UI *inside* each device
   screen stays exactly as originally briefed: white, legible, unchanged. */
:root {
  /* ---- device-screen content (Joe's original "white dashboard" brief,
     unchanged) ---- */
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-solid: #FFFFFF;
  --bg-soft: #F3F6FF;
  --ink: #14141A;
  --ink-dim: #5B6270;
  --ink-faint: #9AA1B0;
  --border: #E9EEF7;
  --border-strong: #DCE3F2;

  /* ---- marketing canvas (outside every device frame) ---- */
  --canvas-bg: #131218;
  --canvas-ink: rgba(255,255,255,0.94);
  --canvas-ink-dim: rgba(255,255,255,0.6);
  --canvas-ink-faint: rgba(255,255,255,0.42);
  --canvas-border: rgba(255,255,255,0.14);

  /* Deep, restrained mesh glows — fewer hues, richer/darker stops than a
     bright pastel wash, closer to how the reference photography reads. */
  --mesh-violet: rgba(124,58,237,0.55);
  --mesh-pink: rgba(190,36,110,0.4);
  --mesh-amber: rgba(180,110,20,0.26);

  /* Brand gradient (Ruby / Coexa's own orb + bubble color) */
  --grad-a: #8B5CF6;
  --grad-b: #FF6FA8;
  --grad-glow: rgba(139,92,246,0.3);

  /* Per-system glossy accents */
  --trust-a: #CFF3FF;   --trust-b: #4FB6E8;   --trust-c: #3E6FE0;
  --memory-a: #FFE9C9;  --memory-b: #FFB86B;  --memory-c: #C9B8E8;
  /* Bumped to full neon saturation for the Lead Sources donut per Joe's
     "futuristic and techy" ask — brighter than the softer tech-pastel these
     used to be, so the per-segment glow in charts.js reads as neon, not a
     tinted shadow. Also feeds beat 6's campaign mini-bar gradient. */
  --source-ad: #00C2FF; --source-new: #B14EFF; --source-engaged: #FF2E9A;
  --intent-low: #5B8DEF; --intent-mid: #FFB86B; --intent-hot: #FF4FA3;

  --good: #1BA672;
  --warn: #E0A83F;
  --hot: #FF6FA8;

  --font-body: 'Onest', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 20px 60px rgba(20,20,40,0.08);
  --shadow-card-lift: 0 30px 80px rgba(20,20,40,0.12);

  /* True dark smoked glass — this is the actual Liquid Glass material: a
     dark, translucent panel with light text, used regardless of what's
     behind it (the same iOS control-center chrome looks like this even in
     light mode). Not a tinted-white card. */
  --glass-bg: linear-gradient(180deg, rgba(36,33,44,0.6), rgba(20,18,26,0.4));
  --glass-border: rgba(255,255,255,0.16);
  --glass-highlight: rgba(255,255,255,0.22);
  --glass-blur: blur(32px) saturate(180%);
  --shadow-glass: 0 1px 0 var(--glass-highlight) inset, 0 -1px 0 rgba(0,0,0,0.25) inset, 0 24px 60px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
}