/* ============================================================
   NIGHTLINE CDN — Design Tokens
   "Your data never sleeps."
   ============================================================ */

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

:root {

  /* ── PURPLE SCALE ───────────────────────────── */
  --purple-900: #1e0547;
  --purple-800: #2d0a6e;
  --purple-700: #4c1d95;
  --purple-600: #5b21b6;
  --purple-500: #7c3aed;   /* Brand primary */
  --purple-400: #8b5cf6;   /* Brand bright  */
  --purple-300: #a78bfa;   /* Brand soft    */
  --purple-200: #c4b5fd;   /* Brand pale    */
  --purple-100: #ddd6fe;
  --purple-50:  #ede9fe;

  /* ── FOREGROUND ─────────────────────────────── */
  --fg-primary:    #e8e8f0;  /* Headings, wordmark text    */
  --fg-secondary:  #a090c8;  /* Tagline, sub-labels        */
  --fg-muted:      #6b6b8a;  /* Placeholder, disabled      */
  --fg-inverse:    #08080f;  /* Text on light/purple bg    */

  /* ── BACKGROUND ─────────────────────────────── */
  --bg-base:       #08080f;  /* Page background            */
  --bg-surface:    #0d0d1a;  /* Section / hero bg          */
  --bg-card:       #12122a;  /* Card / panel bg            */
  --bg-overlay:    rgba(8, 8, 15, 0.85); /* Modal scrim   */

  /* ── BORDERS ────────────────────────────────── */
  --border-subtle:  #1e1e3a;
  --border-default: #2a2a4a;
  --border-active:  #7c3aed;

  /* ── SEMANTIC: STATUS ────────────────────────── */
  --status-online:   #22c55e;
  --status-degraded: #f59e0b;
  --status-offline:  #ef4444;

  /* ── SEMANTIC: INTERACTIVE ───────────────────── */
  --interactive-default:  #7c3aed;
  --interactive-hover:    #8b5cf6;
  --interactive-active:   #6d28d9;
  --interactive-disabled: #2a2a4a;
  --interactive-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.4);

  /* ── SHADOWS & GLOWS ─────────────────────────── */
  --shadow-card:    0 1px 3px rgba(0,0,0,0.6), 0 0 0 1px #1e1e3a;
  --glow-sm:        0 0 12px rgba(124, 58, 237, 0.25);
  --glow-md:        0 0 24px rgba(124, 58, 237, 0.35);
  --glow-lg:        0 0 48px rgba(124, 58, 237, 0.45);
  --glow-text:      0 0 16px rgba(139, 92, 246, 0.5);

  /* ── BORDER RADIUS ───────────────────────────── */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 9999px;

  /* ── SPACING SCALE ───────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── ANIMATION ───────────────────────────────── */
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0.0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-mid:    300ms;
  --dur-slow:   600ms;

  /* ── TYPOGRAPHY: FONTS ───────────────────────── */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body:    "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  /* ── TYPOGRAPHY: SCALE ───────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --text-7xl:  72px;

  /* ── TYPOGRAPHY: WEIGHTS ─────────────────────── */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* ── TYPOGRAPHY: LINE HEIGHT ─────────────────── */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ── TYPOGRAPHY: LETTER SPACING ──────────────── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.15em;
}

/* ── SEMANTIC ELEMENT DEFAULTS ─────────────────── */

body {
  background-color: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--purple-300);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

code {
  padding: 2px 6px;
}

pre {
  padding: var(--space-4);
  overflow-x: auto;
}

a {
  color: var(--purple-300);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--purple-200);
  text-shadow: var(--glow-text);
}

/* ── UTILITY CLASSES ───────────────────────────── */

.text-brand    { color: var(--purple-500); }
.text-primary  { color: var(--fg-primary); }
.text-secondary { color: var(--fg-secondary); }
.text-muted    { color: var(--fg-muted); }
.text-mono     { font-family: var(--font-mono); }
.text-display  { font-family: var(--font-display); }
.text-caps     { text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.glow          { text-shadow: var(--glow-text); }