/* Hidaje AI design tokens. Brand palette + UI scales. Single source of truth for the SPA. */
:root {
  /* Brand palette */
  --navy: #101820;
  --charcoal: #20262E;
  --cloud: #F7F9FB;
  --cyan: #39C6D6;
  --blue: #2F6FED;
  --green: #2E9D66;
  --amber: #F4A62A;
  --red: #D94A38;
  --soft-gray: #E8EDF2;
  --slate: #6B7785;
  --line: #D3DAE3;

  /* Risk-state colors (always paired with text, never color-only) */
  --risk-low: var(--green);
  --risk-moderate: var(--amber);
  --risk-high: var(--red);
  --risk-review: var(--blue);
  --risk-missing: var(--slate);

  /* Data-strength colors */
  --ds-text-only: var(--slate);
  --ds-basic: var(--cyan);
  --ds-operational: var(--blue);
  --ds-graph-ready: var(--green);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px;
  --fs-xl: 28px; --fs-2xl: 38px; --fs-3xl: 52px;
  --lh: 1.55;

  /* Spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  /* Radius / shadow / border */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(16,24,32,.08);
  --shadow-md: 0 6px 24px rgba(16,24,32,.12);
  --shadow-lg: 0 16px 48px rgba(16,24,32,.20);
  --border: 1px solid var(--line);

  /* z-index */
  --z-nav: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400;

  /* animation */
  --dur-fast: 120ms; --dur: 220ms; --ease: cubic-bezier(.2,.7,.2,1);

  /* breakpoints (reference; used via media queries) */
  --bp-tablet: 820px; --bp-mobile: 540px;
}