/* ============================================================
   CloudPulse — design tokens
   Single source of truth for colors, typography, spacing, radii, shadows.
   Import this BEFORE any component CSS. Override at :root scope only.
   ============================================================ */

:root {
  /* ---- Surfaces (dark theme — the default) ---- */
  --bg-0: oklch(0.135 0.025 250);   /* canvas */
  --bg-1: oklch(0.165 0.028 250);   /* card / panel */
  --bg-2: oklch(0.205 0.032 250);   /* inset / hover */
  --bg-3: oklch(0.255 0.036 250);   /* track */

  /* ---- Ink (text + icon foreground) ---- */
  --ink-0: oklch(1 0 0);            /* pure white — titles, primary numbers */
  --ink-1: oklch(0.94 0.012 250);   /* body text */
  --ink-2: oklch(0.82 0.025 255);   /* secondary text, labels — bumped 2026-05-21 (sapphire-tint, brighter than legacy 0.76) */
  --ink-3: oklch(0.78 0.060 255);   /* tertiary, captions — bumped 2026-05-21: legacy 0.58 read as washed-out grey; now lighter sapphire tint */
  --ink-4: oklch(0.55 0.045 255);   /* disabled, dividers — bumped 2026-05-21 from 0.42 so the old captions level stays distinguishable */

  /* ---- Lines / borders ---- */
  --line-soft: oklch(1 0 0 / 0.05);
  --line:      oklch(1 0 0 / 0.08);
  --line-strong: oklch(1 0 0 / 0.18);

  /* ---- Brand (Sapphire scale) ---- */
  --brand-50:  oklch(0.95 0.04 255);
  --brand-100: oklch(0.85 0.10 255);
  --brand-200: oklch(0.72 0.16 255);  /* brand-light — small mark on dark */
  --brand-300: oklch(0.62 0.20 255);  /* brand-mid */
  --brand-400: oklch(0.52 0.20 252);
  --brand-500: oklch(0.44 0.19 250);  /* brand-primary — buttons, links */
  --brand-600: oklch(0.36 0.17 250);  /* brand-deep — hover */
  --brand-700: oklch(0.28 0.13 250);  /* darkest */

  /* Convenience aliases (used everywhere in the existing CSS) */
  --brand: var(--brand-500);
  --brand-light: var(--brand-200);
  --brand-deep: var(--brand-700);

  /* ---- Monochromatic chart scale (5 stops) ---- */
  --chart-1: oklch(0.72 0.20 255);
  --chart-2: oklch(0.58 0.20 252);
  --chart-3: oklch(0.48 0.18 250);
  --chart-4: oklch(0.38 0.13 248);
  --chart-5: oklch(0.34 0.07 245);

  /* ---- Semantic ---- */
  --ok:    oklch(0.72 0.13 160);
  --ok-d:  oklch(0.55 0.13 160);
  --warn:  oklch(0.78 0.14 80);
  --warn-d: oklch(0.62 0.16 70);
  --bad:   oklch(0.68 0.18 22);
  --bad-d: oklch(0.55 0.18 22);

  /* ---- Typography ---- */
  --f-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-ui:      "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — use these tokens directly; do not invent new sizes. */
  --t-display: 48px;     /* page H1 (paired with line-height 1.05, weight 600) */
  --t-h2:     28px;      /* section heads */
  --t-h3:     22px;      /* card titles */
  --t-h4:     18px;      /* sub-card titles */
  --t-body:   14px;
  --t-small:  12.5px;
  --t-xsmall: 11px;
  --t-mono-sm: 10.5px;   /* mono captions / numerals in tight space */

  /* Tracking presets — match the established tightness */
  --tracking-display: -0.025em;
  --tracking-h:       -0.02em;
  --tracking-body:     0;
  --tracking-mono:     0.02em;

  /* ---- Spacing scale (4-step base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Radii (SHARP — never round more than this) ---- */
  --r-sm: 1px;     /* tags, badges */
  --r-md: 2px;     /* buttons, icon-btns, seg, currency, beta close */
  --r-lg: 3px;     /* cards, tiles, banners */
  --r-xl: 4px;     /* large containers */
  --r-pill: 999px; /* live pills, org chips — round forms only */
  --r-circle: 50%; /* avatars, status dots */

  /* ---- Shadows (used sparingly — borders do most of the work) ---- */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3), inset 0 0 0 1px var(--line-soft);
  --shadow-md: 0 6px 14px oklch(0 0 0 / 0.45), inset 0 0 0 1px var(--line-soft);
  --shadow-lg: 0 30px 60px -20px oklch(0 0 0 / 0.6), inset 0 0 0 1px var(--line);

  /* ---- Motion ---- */
  --motion-fast: 140ms;
  --motion-mid:  240ms;
  --motion-slow: 400ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Animated border for highlighted active states.
   Must be supported on browser side (@property + conic-gradient). */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes spin-border { to { --angle: 360deg; } }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.72 0.13 160 / 0.6); }
  50%      { box-shadow: 0 0 0 6px oklch(0.72 0.13 160 / 0); }
}

/* Body defaults */
html, body {
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: oklch(0.62 0.20 255 / 0.4); color: var(--ink-0); }