/* ============================================================
   Culvay Design Tokens · v1.0
   Drop-in CSS custom properties. Source of truth = design-system.md
   Rule of thumb: grays carry the interface; cherry = signal only.
   ============================================================ */

:root {
  /* ---- Core palette ---- */
  --black: #0A0A0A;
  --white: #FFFFFF;

  /* ---- Gray ramp (neutrals do the structural work) ---- */
  --gray-50:   #FAFAFA;
  --gray-100:  #F6F6F6;  /* page background, zebra rows */
  --gray-200:  #EBEBEB;  /* hairlines, default borders */
  --gray-300:  #D6D6D6;  /* strong borders, disabled strokes */
  --gray-400:  #B0B0B0;  /* disabled text, placeholders */
  --gray-500:  #8A8A8A;  /* muted text, captions */
  --gray-600:  #6B6B6B;  /* secondary text */
  --gray-700:  #4D4D4D;  /* icons, tertiary headings */
  --gray-800:  #333333;  /* dark surface hover */
  --gray-900:  #1F1F1F;  /* dark surfaces */
  --gray-1000: #141414;  /* near-black panels */

  /* ---- Cherry ramp (THE accent — signal, never decoration) ---- */
  --cherry-100: #F9D2DC;  /* tint fills, critical row wash */
  --cherry-200: #F4A0B4;  /* light chart series, tags */
  --cherry-300: #E8557E;  /* chart accents, high-severity dot */
  --cherry-400: #C92A55;  /* hover on cherry actions */
  --cherry-500: #A4133C;  /* PRIMARY ACCENT: links-as-signal, critical, brand */
  --cherry-600: #6E0D2A;  /* text on cherry-100, pressed, dark maroon */

  /* ---- Functional palette (desaturated, product-only) ---- */
  --green-100: #E3F0EA;  --green-500: #2E7D5B;  /* success / healthy / compliant */
  --amber-100: #F7EDD8;  --amber-500: #B27A0F;  /* warning / monitor / attention */
  --blue-100:  #E4EDF6;  --blue-500:  #3A6EA5;  /* informational / neutral status */

  /* ---- Type families ---- */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif; /* all headlines */
  --font-body:    "Inter", system-ui, sans-serif;                /* product UI, body */
  --font-serif:   "Instrument Serif", Georgia, serif;            /* ONE accent word (italic) */
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* data */

  /* ---- Semantic tokens (light) ---- */
  --surface-page:    var(--gray-100);
  --surface-card:    var(--white);
  --surface-inverse: var(--black);
  --text-primary:    var(--black);
  --text-secondary:  var(--gray-600);
  --text-muted:      var(--gray-500);
  --text-inverse:    var(--white);
  --text-accent:     var(--cherry-500);
  --border-default:  var(--gray-200);
  --border-strong:   var(--gray-300);
  --action-primary:  var(--black);     /* fill; text = white */
  --action-brand:    var(--cherry-500);/* reserved: Book a demo, critical confirm */
  --focus-ring:      var(--cherry-500);/* 2px outside */

  /* ---- Spacing (base 8px) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* ---- Radius ---- */
  --radius-badge: 4px;   /* badges, tags */
  --radius-control: 8px; /* controls, inputs, buttons */
  --radius-card: 12px;   /* cards, modals */
  --radius-pill: 999px;  /* pills, risk badges */

  /* ---- Elevation (elevation via border first; 2 shadow levels only) ---- */
  --shadow-sm: 0 1px 2px rgba(10,10,10,.06);  /* raised cards */
  --shadow-lg: 0 8px 24px rgba(10,10,10,.12); /* popovers, modals */

  /* ---- Motion ---- */
  --dur-hover: 120ms; --dur-state: 200ms; --dur-panel: 300ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Risk band mapping (0–60 scale) — ONE canonical mapping for
   every badge, KPI card, chart, and table. Critical is the only
   solid fill; it must jump out of a scanning row.
   ============================================================ */
:root {
  --band-healthy-fill:  var(--green-100);  --band-healthy-ink:  var(--green-500);  /* 0–15  */
  --band-monitor-fill:  var(--blue-100);   --band-monitor-ink:  var(--blue-500);   /* 16–30 */
  --band-interv-fill:   var(--amber-100);  --band-interv-ink:   var(--amber-500);  /* 31–45 */
  --band-high-fill:     var(--cherry-100); --band-high-ink:     var(--cherry-500); /* 46–55 */
  --band-critical-fill: var(--cherry-500); --band-critical-ink: var(--white);      /* 56–60 (solid) */
}