/*
 * Design tokens. Values come from docs/reference/demo/globals.css (the approved design).
 * Use these custom properties everywhere; never hard-code colours in components.
 */
:root {
  /* Surfaces and lines */
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-2: #f5f5f7;
  --color-surface-3: #eeeef2;
  --color-line: #e7e7ec;
  --color-line-2: #d9dae1;

  /* Foreground */
  --color-fg: #0b0c10;
  --color-fg-2: #4a4f5c;
  --color-fg-3: #666b78; /* T39 (DSH-080): 4.6:1 on every surface (was #7d8290, 3.3–3.8:1) */

  /* Brand */
  --color-brand: #5b4dff;
  --color-brand-600: #4a3cf0;
  --color-brand-50: #f1efff;
  --color-brand-100: #e4e0ff;
  --color-violet: #9b5cff;
  --color-cyan: #22c3ee;

  /* Status */
  --color-ok: #12b76a;
  --color-ok-bg: #e7f8f0;
  --color-ok-fg: #067647; /* T39: 5.2:1 on the ok background (was #0a8a4f, 4.0:1) */
  --color-warn: #f59e0b;
  --color-warn-bg: #fff4e0;
  --color-warn-fg: #b45309;
  --color-bad: #f04438;
  --color-bad-bg: #fef0ef;
  --color-bad-fg: #c4271c;

  /* Night (camera views, dark panels) */
  --color-night: #0b0e17;
  --color-night-2: #131826;
  --color-night-3: #1d2436;

  /* The AI accent: iris to violet to cyan. Used sparingly. */
  --gradient-ai: linear-gradient(95deg, #5b4dff 0%, #9b5cff 48%, #22c3ee 100%);

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.75rem;     /* 12px */
  --text-base: 0.8125rem; /* 13px: default UI text */
  --text-md: 0.875rem;    /* 14px */
  --text-lg: 1rem;        /* 16px */
  --text-xl: 1.25rem;     /* 20px: page titles */
  --text-2xl: 1.75rem;    /* 28px: KPI figures */

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Elevation: hairline ring plus a soft shadow */
  --ring-hairline: 0 0 0 1px var(--color-line);
  --shadow-soft: 0 1px 2px rgb(11 12 16 / 0.04), 0 1px 1px rgb(11 12 16 / 0.02);
  --shadow-card: 0 0 0 1px var(--color-line), 0 1px 2px rgb(11 12 16 / 0.04);
  --shadow-pop: 0 0 0 1px var(--color-line), 0 8px 24px -12px rgb(11 12 16 / 0.2);
  --shadow-frame: 0 2px 4px rgb(11 12 16 / 0.04), 0 30px 80px -24px rgb(35 28 110 / 0.35);

  /* Layout */
  --topbar-height: 3rem;
  --sidebar-width: 188px;
  --content-max: 1280px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}