/* ============================================================
   Deeprion Labs, Colors & Type Foundations
   ------------------------------------------------------------
   Fonts are loaded from Google Fonts (Space Grotesk, Inter,
   JetBrains Mono). If you need offline/self-hosted webfonts,
   drop the .woff2 files in fonts/ and swap the @import for
   @font-face declarations.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND NAVY (primary, ~70% of any surface) ---------- */
  --navy-deep:      #0A1528;  /* Deep Space Navy, darkest, page base   */
  --navy-brand:     #0D1B33;  /* Brand Navy, primary background        */
  --navy-surface:   #15253F;  /* Navy Surface, cards, raised panels    */
  --navy-elevated:  #1C3050;  /* Hover / elevated surface               */
  --navy-line:      #24375A;  /* Hairline borders, grid + node lines    */

  /* ---------- CYAN ACCENT (~10%, calm, not neon) ---------- */
  --cyan-signal:    #38BDF8;  /* Signal Cyan, primary accent           */
  --cyan-ocean:     #0EA5E9;  /* Ocean Blue, deeper accent, pressed    */
  --cyan-soft:      rgba(56, 189, 248, 0.14); /* tint fills, chips      */
  --cyan-glow:      rgba(56, 189, 248, 0.32); /* soft glow shadows      */

  /* ---------- TEXT / NEUTRALS (~20%) ---------- */
  --white-signal:   #EAF0FB;  /* Signal White, primary text            */
  --gray-steel:     #7C8BA8;  /* Steel Gray, secondary text, labels    */
  --gray-muted:     #56688A;  /* Muted, captions, disabled             */

  /* ---------- SEMANTIC: foreground ---------- */
  --fg-1: var(--white-signal);   /* primary text                        */
  --fg-2: var(--gray-steel);     /* secondary text                      */
  --fg-3: var(--gray-muted);     /* tertiary / captions                 */
  --fg-accent: var(--cyan-signal);
  --fg-on-accent: #04111F;       /* text on a cyan fill                 */

  /* ---------- SEMANTIC: background ---------- */
  --bg-base:     var(--navy-deep);
  --bg-1:        var(--navy-brand);
  --bg-surface:  var(--navy-surface);
  --bg-elevated: var(--navy-elevated);

  /* ---------- SEMANTIC: lines / borders ---------- */
  --border-hairline: var(--navy-line);
  --border-strong:   #31466E;
  --border-accent:   var(--cyan-signal);

  /* ---------- STATUS ---------- */
  --status-success: #34D399;
  --status-warning: #FBBF24;
  --status-danger:  #F87171;
  --status-info:    var(--cyan-signal);

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --font-display: 'Space Grotesk', system-ui, sans-serif; /* headings + wordmark */
  --font-body:    'Inter', system-ui, sans-serif;          /* body copy           */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;/* technical accents   */

  /* ---------- TYPE SCALE (clamped, fluid-friendly) ---------- */
  --text-display: 600 4.5rem/1.04 var(--font-display);   /* 72px hero          */
  --text-h1:      600 3.25rem/1.08 var(--font-display);  /* 52px               */
  --text-h2:      600 2.25rem/1.14 var(--font-display);  /* 36px               */
  --text-h3:      500 1.5rem/1.25 var(--font-display);   /* 24px               */
  --text-h4:      500 1.25rem/1.35 var(--font-display);  /* 20px               */
  --text-lead:    400 1.25rem/1.6 var(--font-body);      /* 20px lead paragraph */
  --text-body:    400 1rem/1.65 var(--font-body);        /* 16px               */
  --text-small:   400 0.875rem/1.6 var(--font-body);     /* 14px               */
  --text-caption: 400 0.75rem/1.5 var(--font-body);      /* 12px               */
  --text-mono:    500 0.875rem/1.5 var(--font-mono);     /* 14px code/labels   */
  --text-eyebrow: 500 0.75rem/1.4 var(--font-mono);      /* 12px uppercase tag */

  /* letter-spacing tokens */
  --tracking-tight:   -0.02em;  /* large display headings */
  --tracking-normal:  0;
  --tracking-eyebrow: 0.18em;   /* uppercase mono eyebrows */

  /* ============================================================
     SPACING / RADII / SHADOW
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;   /* chips, inputs, small controls */
  --radius-md: 12px;  /* buttons, cards                */
  --radius-lg: 16px;  /* large cards, panels           */
  --radius-pill: 999px;

  /* Elevation, dark UI uses subtle borders + soft cyan glow,
     not heavy drop shadows. */
  --shadow-sm:   0 1px 2px rgba(4, 11, 21, 0.4);
  --shadow-card: 0 8px 24px rgba(4, 11, 21, 0.45);
  --shadow-lg:   0 24px 60px rgba(4, 11, 21, 0.55);
  --glow-cyan:   0 0 0 1px rgba(56, 189, 248, 0.35), 0 0 24px var(--cyan-glow);
  --glow-cyan-sm:0 0 16px rgba(56, 189, 248, 0.25);

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS, opt-in via .ds-prose or use vars
   ============================================================ */
.ds-h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; }
.ds-h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; }
.ds-h3 { font: var(--text-h3); color: var(--fg-1); margin: 0; }
.ds-lead { font: var(--text-lead); color: var(--fg-2); margin: 0; }
.ds-body { font: var(--text-body); color: var(--fg-2); margin: 0; }
.ds-eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  margin: 0;
}
.ds-mono { font: var(--text-mono); color: var(--fg-2); }