/* SourcingAI – Enterprise Value Optimisation (EVO) — design tokens
   Direction v1.3: light autumn, black accents, slim rounded type — clean, strong text, few boxes, no pills.
   Variable names are kept stable so components stay theme-agnostic:
   --mint = healthy/ready (olive) · --blue = in review/information (dusty slate)
   --amber = human decision (ochre) · --coral = material risk (rust) · --signal = JoJo (terracotta). */
:root {
  /* Autumn palette */
  --cream: #F6F0E6;      /* page ground */
  --paper: #FFFCF7;      /* panels */
  --sand: #EDE3D3;       /* quiet bands, hover */
  --linen: #E3D7C4;      /* hairlines */
  --taupe: #CDBCA3;      /* strong lines */
  --black: #1C1916;      /* accent black: primary actions, headlines, rules */
  --signal: #C66A3D;     /* terracotta — JoJo and brand moments */
  --signal-ink: #A04C24;

  /* Brand roles (names kept for compatibility) */
  --graphite: var(--black);
  --ink: var(--black);
  --off-white: var(--cream);
  --mist: var(--sand);
  --mint: #7D8F4E;       /* olive */
  --blue: #7690A0;       /* dusty slate */
  --amber: #D4A044;      /* ochre */
  --coral: #B5503A;      /* rust */

  /* RGB channels for tints */
  --mint-rgb: 125 143 78; --blue-rgb: 118 144 160; --amber-rgb: 212 160 68; --coral-rgb: 181 80 58;
  --signal-rgb: 198 106 61; --ink-rgb: 28 25 22; --paper-rgb: 255 252 247; --line-rgb: 150 125 95; --grey-rgb: 106 94 81;

  /* Warm neutral scale (900 = lightest ground … 100 = black text) */
  --g-900: #FFFDF9;
  --g-850: #F6F0E6;
  --g-800: #FFFCF7;
  --g-750: #F1E8DA;
  --g-700: #E9DECC;
  --g-600: #E3D7C4;
  --g-500: #CDBCA3;
  --g-400: #574D44;
  --g-300: #3F3730;
  --g-200: #2B2521;
  --g-100: #1C1916;

  /* Accessible text tones (AA on cream, paper and sand) */
  --mint-ink: #566A2F;
  --blue-ink: #476170;
  --amber-ink: #7F560F;
  --coral-ink: #9A3B26;
  --grey-ink: #3F3730;

  /* Status semantics (§8 colour discipline) */
  --status-healthy: var(--mint);
  --status-info: var(--blue);
  --status-decision: var(--amber);
  --status-risk: var(--coral);
  --status-inactive: var(--g-400);

  /* Surfaces (names kept from earlier directions) */
  --void: var(--cream);
  --deep: var(--sand);
  --glass: var(--paper);
  --glass-2: #FBF6EE;
  --hair: var(--linen);
  --hair-2: var(--taupe);
  --grad-signal: linear-gradient(100deg, var(--signal), var(--amber));
  --shadow-soft: 0 1px 0 rgb(var(--ink-rgb) / .03), 0 18px 40px -28px rgb(var(--ink-rgb) / .25);

  /* Typography — slim, rounded, modern */
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Quicksand", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-mono: var(--font);
  --fs-display: clamp(2.6rem, 1.5rem + 4vw, 5rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
  --fs-h3: 1.18rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;
  --fs-metric: clamp(2.2rem, 1.7rem + 2vw, 3.4rem);

  /* Spacing — 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-pill: 4px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1200px;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --t-fast: 160ms; --t-med: 320ms; --t-slow: 700ms;

  --focus-ring: 0 0 0 2px var(--cream), 0 0 0 4px var(--black);
}