/* KH Design System · Color tokens (v2)
 * Cobalt is the identity, now with a violet companion for the dynamic gradient.
 * Brighter, warmer neutrals (less gray). Green / amber / red still carry state only.
 * The gradient and vivid accents live on the banner, big numbers, and the logo.
 */
:root {
  /* --- Base neutrals: bright, warm, less gray --- */
  --bg: #FBFBFD;          /* bright near-white page (was cool gray porcelain) */
  --surface: #FFFFFF;     /* elevated white cards */
  --surface-2: #F3F4FB;   /* faint tinted panel for alternating sections */
  --ink: #0F1424;         /* near-black, blue undertone, never #000 */
  --ink-2: #2B3145;       /* secondary heading ink */
  --muted: #626B7C;       /* secondary text, labels */
  --hairline: #E7E9F1;    /* soft 1px borders + dividers */

  /* --- Brand: cobalt identity + violet companion --- */
  --brand: #1F3BE6;
  --brand-hover: #1730C4;
  --brand-2: #7C5CFF;         /* violet companion */
  --brand-soft: #E9ECFF;      /* cobalt tint */
  --brand-2-soft: #F0EBFF;    /* violet tint */
  /* signature gradient */
  --brand-gradient: linear-gradient(120deg, #1F3BE6 0%, #7C5CFF 100%); /* @kind color */
  --gradient: linear-gradient(120deg, #1F3BE6 0%, #7C5CFF 100%); /* @kind color */
  --gradient-vivid: linear-gradient(120deg, #2A4BFF 0%, #7C5CFF 52%, #B57BFF 100%); /* @kind color */
  /* dark banner base */
  --gradient-ink: linear-gradient(160deg, #141A32 0%, #0F1424 60%, #1A1440 100%); /* @kind color */

  /* --- Warm pop: one highlight only (a hot number, a live dot) --- */
  --pop: #FF6B4A;
  --pop-soft: #FFEAE3;

  /* --- Status: healthy / positive --- */
  --ok: #12A15A;
  --ok-tint: #E6F6EC;
  --ok-bright: #37C983;

  /* --- Status: degraded / caution --- */
  --warn: #C77F00;
  --warn-tint: #FBF1DE;
  --warn-bright: #F0A82D;

  /* --- Status: failing / negative --- */
  --down: #E0453A;
  --down-tint: #FCE9E7;
  --down-bright: #F06A5E;

  /* --- Status: idle / neutral --- */
  --idle: #6B7480;
  --idle-tint: #EDEFF3;
  --idle-bright: #9AA3B0;

  /* --- Text on ink / gradient surfaces --- */
  --on-ink: #FFFFFF;
  --on-ink-muted: #A6ADBD;

  /* --- Semantic aliases --- */
  --text-body: var(--ink);
  --text-muted: var(--muted);
  --text-label: var(--muted);
  --surface-page: var(--bg);
  --surface-card: var(--surface);
  --surface-inverse: var(--ink);
  --border: var(--hairline);
  --focus-ring: var(--brand);
  --link: var(--brand);
}