/* ============================================================
   Acrostic Design Tokens — v2 "Monochrome athletic"
   Brand: black & white, sharp, gym-floor confident.
   Color is reserved for data: green = good, amber = warn,
   red = risk, blue = info. The brand itself is ink.
   ============================================================ */

:root {
  /* --- Color: neutrals (crisp white + ink) --- */
  --paper:        #F6F6F7;   /* app background */
  --surface:      #FFFFFF;   /* cards, panels */
  --surface-2:    #F0F0F2;   /* subtle wells, table stripes */
  --ink:          #0A0A0B;   /* primary text */
  --ink-2:        #4C4C52;   /* secondary text */
  --ink-3:        #8B8B92;   /* muted text, placeholders */
  --line:         #E7E7EA;   /* hairline borders */
  --line-2:       #D7D7DC;   /* stronger borders */

  /* --- Color: brand signal (ink — the brand is black) --- */
  --signal:       #0A0A0B;   /* actions, links, focus */
  --signal-ink:   #2B2B31;   /* hover / pressed */
  --signal-soft:  #EEEEF0;   /* tinted backgrounds, selected states */

  /* --- Color: semantic (data only) --- */
  --good:         #0E8A6A;
  --good-soft:    #E3F2EC;
  --warn:         #B27A00;
  --warn-soft:    #FBF1DC;
  --risk:         #C0392B;
  --risk-soft:    #FBE7E4;
  --info:         #2563EB;
  --info-soft:    #E7EEFC;

  /* --- Dark chrome (sidebar) --- */
  --chrome:       #0B0B0C;   /* true-black sidebar */
  --chrome-ink:   #ECECEF;
  --chrome-muted: #85858D;
  --chrome-line:  #202024;
  --chrome-active:#2A2A30;

  /* --- Type --- */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 22px;  --fs-2xl: 28px;  --fs-3xl: 36px;

  /* --- Space / radius / shadow --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 5px; --r: 8px; --r-lg: 12px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(10,10,11,.05);
  --shadow:    0 1px 3px rgba(10,10,11,.07), 0 4px 14px rgba(10,10,11,.05);
  --shadow-lg: 0 4px 10px rgba(10,10,11,.08), 0 16px 40px rgba(10,10,11,.12);
}