/* ============================================================
   CUPPER — Design System tokens & base
   Brand: steel-blue #3C80AF · Comfortaa (display) + Source Sans 3 (data)
   Light theme. Cool-leaning clinical neutrals.
   ============================================================ */

:root {
  /* ---- Brand steel-blue scale (anchored on the icon #3C80AF) ---- */
  --blue-50:  #eef4f9;
  --blue-100: #d8e6f0;
  --blue-200: #b4cfe2;
  --blue-300: #86b1cf;
  --blue-400: #5b96bd;
  --blue-500: #3c80af;   /* PRIMARY — brand + primary action */
  --blue-600: #336d97;   /* hover */
  --blue-700: #2c5f84;   /* deep brand tone / pressed (≈ wordmark) */
  --blue-800: #244d6b;
  --blue-900: #1d3d54;

  /* ---- Cool neutrals (slate, slightly blue-leaning) ---- */
  --surface-0:  #ffffff;   /* cards */
  --surface-25: #fafcfd;
  --surface-50: #f4f7fa;   /* app background */
  --line-100:   #eaeff4;   /* subtle divider */
  --line-200:   #dde5ec;   /* default border */
  --line-300:   #c8d3dc;   /* strong border */
  --ink-400:    #9aa8b3;   /* disabled / faint */
  --ink-500:    #74838f;   /* placeholder / tertiary text */
  --ink-600:    #556673;   /* secondary text */
  --ink-700:    #3c4c58;
  --ink-800:    #283642;
  --ink-900:    #18242e;   /* primary text */

  /* ---- Functional STATE palette (separate from brand; colorblind-safe w/ icon+shape) ---- */
  --confirm-text:   #2f8f63;
  --confirm-icon:   #2f8f63;
  --confirm-bg:     #e9f4ee;
  --confirm-border: #a9d8be;

  --low-text:   #a96a06;
  --low-icon:   #c7820c;
  --low-bg:     #fbefd6;
  --low-border: #ecc986;

  --flag-text:   #be3725;
  --flag-icon:   #d2402b;
  --flag-bg:     #fce3de;
  --flag-border: #f0b1a5;

  --empty-text: #9aa8b3;
  --empty-line: #c8d3dc;

  /* ---- Radius (soft, echoing Comfortaa, on a precise grid) ---- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- 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;

  /* ---- Elevation (quiet, intentional) ---- */
  --e1: 0 1px 2px rgba(24,36,46,.06), 0 1px 1px rgba(24,36,46,.04);
  --e2: 0 2px 4px rgba(24,36,46,.05), 0 6px 16px rgba(24,36,46,.07);
  --e3: 0 12px 32px rgba(24,36,46,.12), 0 3px 8px rgba(24,36,46,.07);
  --focus: 0 0 0 3px rgba(60,128,175,.32);

  /* ---- Type ---- */
  --font-display: "Comfortaa", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --tnum: "tnum" 1, "lnum" 1;

  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--surface-50);
  color: var(--ink-900);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* numerals: tabular + lining everywhere data lives */
.tnum, td, th, .num, input { font-feature-settings: var(--tnum); }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -.01em; }

a { color: var(--blue-600); }

::selection { background: var(--blue-200); }