/* ============================================================
   Consort Labs — Design Tokens
   Single source of truth for the brand + the Console website.
   Theme: dark page with a light (near-white) header.
   ============================================================ */

:root {
  /* ---- Brand: Royal purple ramp ---- */
  --cl-purple-900: #271340;
  --cl-purple-800: #3a1d61;
  --cl-purple-700: #542a98;   /* PRIMARY brand color */
  --cl-purple-600: #6a37bd;
  --cl-purple-500: #8049d6;   /* bright purple (gradients, hovers) */
  --cl-lilac:      #b49aec;   /* tonal bridge / reversed mark peak */
  --cl-lilac-100:  #e1d8f6;

  /* ---- Accent: Electric cyan (the "pop") ---- */
  --cl-cyan:       #1ed6e0;   /* signal color: links, live states, accents */
  --cl-cyan-deep:  #0a7c89;   /* cyan as TEXT on light surfaces (AA) */
  --cl-cyan-ink:   #06262b;   /* text/icon ON a cyan fill */

  /* ---- Signal gradient (equalizer bars, accents) ---- */
  --cl-gradient: linear-gradient(180deg, #9a6be6 0%, #1ed6e0 100%);
  --cl-gradient-h: linear-gradient(100deg, #8049d6 0%, #6a37bd 32%, #1ed6e0 100%);

  /* ---- Dark page surfaces (cool neutrals) ---- */
  --cl-bg:        #0c0911;   /* page background */
  --cl-bg-elev:   #120d1b;   /* footer / raised band */
  --cl-surface:   #16111f;   /* cards */
  --cl-surface-2: #1b1527;   /* nested / hovered cards, console panel */

  /* ---- Text on dark ---- */
  --cl-text:        #f4f2f8;
  --cl-text-muted:  #a39fb2;
  --cl-text-faint:  #736f82;

  /* ---- Hairlines on dark ---- */
  --cl-line:        rgba(255,255,255,0.10);
  --cl-line-strong: rgba(255,255,255,0.16);

  /* ---- Light header / light-surface tokens ---- */
  --cl-header-bg:   rgba(255,255,255,0.95);
  --cl-header-line: #eeedf3;
  --cl-ink:         #1b1a22;   /* primary text on light */
  --cl-ink-muted:   #5f5c6c;   /* secondary text on light */
  --cl-paper:       #fafafc;   /* light surface (used for inputs/light areas) */

  /* ---- Typography ---- */
  --cl-font-serif: "Newsreader", Georgia, "Times New Roman", serif;       /* display / headlines / "Consort" */
  --cl-font-sans:  "Space Grotesk", system-ui, -apple-system, sans-serif; /* UI / body / "Labs" / labels */

  /* Type scale (desktop) */
  --cl-fs-display: clamp(40px, 6vw, 78px);  /* hero H1 — serif 500 */
  --cl-fs-h2:      clamp(30px, 4vw, 46px);  /* section titles — serif 500 */
  --cl-fs-h3:      30px;                     /* card titles */
  --cl-fs-lead:    20px;                     /* hero subhead */
  --cl-fs-body:    17px;                     /* base body */
  --cl-fs-small:   15px;
  --cl-fs-eyebrow: 12px;                     /* uppercase label, tracked */

  --cl-lh-tight:  1.04;
  --cl-lh-body:   1.6;
  --cl-tracking-tight:   -0.02em;  /* headlines */
  --cl-tracking-eyebrow:  0.22em;  /* uppercase eyebrows */
  --cl-weight-regular: 400;
  --cl-weight-medium:  500;
  --cl-weight-semibold:600;
  --cl-weight-bold:    700;

  /* ---- Spacing scale (4px base) ---- */
  --cl-space-1: 4px;
  --cl-space-2: 8px;
  --cl-space-3: 12px;
  --cl-space-4: 16px;
  --cl-space-5: 20px;
  --cl-space-6: 24px;
  --cl-space-8: 32px;
  --cl-space-10: 40px;
  --cl-space-12: 48px;
  --cl-space-16: 64px;
  --cl-space-20: 80px;
  --cl-space-section: 60px;   /* vertical padding between sections */
  --cl-wrap-max: 1200px;       /* content container width */
  --cl-wrap-pad: 32px;

  /* ---- Radii ---- */
  --cl-radius-sm:   8px;
  --cl-radius-md:   10px;
  --cl-radius-lg:   14px;   /* cards */
  --cl-radius-xl:   18px;   /* console panel */
  --cl-radius-tile: 26px;   /* app icon / favicon tile */
  --cl-radius-pill: 999px;  /* buttons, tags */

  /* ---- Elevation ---- */
  --cl-shadow-card:  0 26px 50px -30px rgba(0,0,0,0.7);
  --cl-shadow-panel: 0 40px 90px -40px rgba(0,0,0,0.8);
  --cl-glow-cyan:    0 10px 30px -8px rgba(30,214,224,0.55);

  /* ---- Motion ---- */
  --cl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cl-dur-fast: 0.18s;
  --cl-dur-base: 0.22s;
  --cl-dur-reveal: 0.7s;
}