/* ============================================================================
   AspectIQ Design System — tokens
   Professional, enterprise blue + cool-slate. IBM Plex Sans / IBM Plex Mono.
   Self-contained: no external design-system dependency.
   Variable names mirror the old token contract so site.css keeps working.
   ========================================================================= */

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

:root {
  /* Neutrals — cool slate (Linear / Vercel enterprise) */
  --bg-rgb:            249 250 252;
  --surface-rgb:       255 255 255;
  --surface-2-rgb:     244 247 250;
  --surface-3-rgb:     236 240 246;
  --border-rgb:        225 231 240;
  --border-light-rgb:  237 241 247;

  --text-rgb:           15  23  42;   /* slate-900 ink */
  --text-secondary-rgb: 69  84 104;   /* slate-600 */
  --text-tertiary-rgb: 130 142 160;   /* slate-400/500 */

  /* Brand primary — confident corporate blue (blue-700) */
  --primary-rgb:    29  78 216;
  --primary-on-rgb: 255 255 255;
  /* Lighter brand accent for use ON dark navy surfaces */
  --accent-light-rgb: 130 168 255;

  /* Status accents */
  --green-rgb:   21 128  61;   /* healthy */
  --blue-rgb:    37  99 235;   /* info / logs */
  --yellow-rgb: 180  83   9;   /* warning */
  --red-rgb:   220  38  38;    /* error */
  --cyan-rgb:    8 145 178;
  --purple-rgb: 124  58 237;   /* traces */
  --orange-rgb: 234  88  12;
  /* legacy alias — brand-accent uses primary now (no amber) */
  --amber-rgb:  29  78 216;

  /* Deep navy for dark sections (ink) */
  --ink-rgb:    11  18  32;

  /* Motion */
  --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Radii */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Elevation — layered soft shadows (premium depth) */
  --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow-sm: 0 1px 3px rgb(15 23 42 / 0.07), 0 1px 2px rgb(15 23 42 / 0.04);
  --shadow-md: 0 6px 16px rgb(15 23 42 / 0.08), 0 2px 5px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 14px 36px rgb(15 23 42 / 0.10), 0 5px 12px rgb(15 23 42 / 0.05);
  --shadow-xl: 0 28px 64px rgb(15 23 42 / 0.16), 0 10px 24px rgb(15 23 42 / 0.07);
  --shadow-glow: 0 0 0 1px rgb(37 99 235 / 0.18), 0 10px 34px rgb(37 99 235 / 0.22);

  /* Gradients */
  --grad-brand:   linear-gradient(135deg, rgb(37 99 235), rgb(8 145 178));   /* blue -> cyan */
  --grad-brand-2: linear-gradient(135deg, rgb(29 78 216), rgb(124 58 237));  /* blue -> violet */
  --grad-text:    linear-gradient(120deg, #60a5fa, #22d3ee);                 /* light, for dark bg */
  --grad-ink:     radial-gradient(1100px 620px at 72% -12%, rgb(37 99 235 / 0.28), transparent 58%), radial-gradient(800px 500px at 12% 110%, rgb(124 58 237 / 0.16), transparent 60%), linear-gradient(180deg, #0c1426, #0b1020);
  --grad-mesh:    radial-gradient(620px 360px at 88% -8%, rgb(37 99 235 / 0.10), transparent 60%), radial-gradient(520px 320px at -6% 8%, rgb(8 145 178 / 0.08), transparent 55%);

  /* Spacing */
  --space-xs: 4px; --space-sm: 8px; --space-md: 12px;
  --space-lg: 16px; --space-xl: 20px; --space-2xl: 24px;

  /* Fonts */
  --font-ui:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, monospace;

  color-scheme: light;

  /* ready-to-use color aliases */
  --bg:            rgb(var(--bg-rgb));
  --surface:       rgb(var(--surface-rgb));
  --surface-2:     rgb(var(--surface-2-rgb));
  --surface-3:     rgb(var(--surface-3-rgb));
  --border:        rgb(var(--border-rgb));
  --border-light:  rgb(var(--border-light-rgb));
  --text:           rgb(var(--text-rgb));
  --text-secondary: rgb(var(--text-secondary-rgb));
  --text-tertiary:  rgb(var(--text-tertiary-rgb));
  --primary:    rgb(var(--primary-rgb));
  --primary-on: rgb(var(--primary-on-rgb));
  --accent-light: rgb(var(--accent-light-rgb));
  --green:  rgb(var(--green-rgb));
  --blue:   rgb(var(--blue-rgb));
  --yellow: rgb(var(--yellow-rgb));
  --red:    rgb(var(--red-rgb));
  --cyan:   rgb(var(--cyan-rgb));
  --purple: rgb(var(--purple-rgb));
  --orange: rgb(var(--orange-rgb));
  --amber:  rgb(var(--amber-rgb));
  --ink:    rgb(var(--ink-rgb));
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}