/* ============================================================
   HealthFees Insights — hi-fi design tokens
   Single source of truth. Mirrored 1:1 into Figma variables:
   collections: Primitives (1 mode) · Semantic (Light/Dark) ·
   Space (1 mode) · Radius · Type · Elevation
   ============================================================ */

/* ---------- 1. PRIMITIVES (mode-independent raw palette) ---------- */
:root {
  /* neutral ramp — warm "clinical paper" */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FBFAF7;
  --neutral-50:  #F7F6F1;
  --neutral-100: #F1EFE8;
  --neutral-150: #E9E7DD;
  --neutral-200: #DEDBD0;
  --neutral-300: #C9C6B9;
  --neutral-400: #A8A599;
  --neutral-500: #8A877C;
  --neutral-600: #6B685E;
  --neutral-700: #4E4C44;
  --neutral-800: #34322C;
  --neutral-850: #26251F;
  --neutral-900: #1D1C17;
  --neutral-950: #151511;

  /* accent ramp — trustworthy blue (brand-continuous with #185FA5) */
  --blue-50:  #EEF5FC;
  --blue-100: #DCEAF8;
  --blue-200: #B6D4F0;
  --blue-300: #85B6E4;
  --blue-400: #4F94D4;
  --blue-500: #2E77BC;
  --blue-600: #1A5FA8;
  --blue-700: #144C88;
  --blue-800: #103C6C;
  --blue-900: #0C2E53;

  /* price-tier ramps */
  --green-100: #E8F3DC;
  --green-500: #4C8F27;
  --green-600: #3D7A1C;
  --green-700: #2F6212;
  --amber-100: #FBEFD8;
  --amber-500: #DD8A1E;
  --amber-600: #C2740F;
  --red-100:   #FBE3E3;
  --red-500:   #D64545;
  --red-600:   #BB3434;

  /* ---------- 2. SPACE (8pt scale, 4px half-step) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- 3. RADIUS ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* ---------- 4. TYPE ---------- */
  --font-ui: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", "SF Mono", monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-28: 28px;
  --fs-44: 44px;
  --lh-tight: 1.15;
  --lh-body: 1.5;
  --w-reg: 400;
  --w-med: 500;
  --w-semi: 600;
}

/* ---------- 5. SEMANTIC — LIGHT (default mode) ---------- */
:root {
  --bg:            var(--neutral-50);
  --bg-subtle:     var(--neutral-100);
  --card:          var(--neutral-0);
  --surface:       var(--neutral-25);
  --surface-2:     var(--neutral-100);

  --text:          #232220;
  --text-2:        #605D54;
  --muted:         var(--neutral-500);
  --text-invert:   var(--neutral-25);

  --border:        #E7E5DB;
  --border-strong: var(--neutral-300);

  --accent:        var(--blue-600);
  --accent-hover:  var(--blue-700);
  --accent-active: var(--blue-800);
  --on-accent:     #FFFFFF;
  --accent-bg:     var(--blue-50);
  --accent-bg-2:   var(--blue-100);
  --accent-border: var(--blue-200);

  --low:        var(--green-500);
  --low-bg:     var(--green-100);
  --mid:        var(--amber-500);
  --mid-bg:     var(--amber-100);
  --high:       var(--red-500);
  --high-bg:    var(--red-100);
  --success:    var(--green-600);
  --warning:    var(--amber-600);
  --danger:     var(--red-600);

  /* charts */
  --chart-grid:   #EDEBE1;
  --chart-axis:   var(--neutral-300);
  --chart-label:  var(--neutral-500);
  --series-you:        var(--blue-600);
  --series-you-soft:   var(--blue-100);
  --series-median:     var(--neutral-400);
  --series-median-soft:var(--neutral-200);

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(29, 28, 23, 0.05);
  --shadow-md: 0 1px 2px rgba(29, 28, 23, 0.05), 0 4px 12px -2px rgba(29, 28, 23, 0.08);
  --shadow-lg: 0 4px 8px rgba(29, 28, 23, 0.06), 0 16px 40px -8px rgba(29, 28, 23, 0.18);
  --ring: 0 0 0 3px var(--blue-100);

  color-scheme: light;
}

/* ---------- 5b. SEMANTIC — DARK ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--neutral-950);
    --bg-subtle:     #101009;
    --card:          #1E1D18;
    --surface:       #24231C;
    --surface-2:     #2A2921;

    --text:          #F2F0E9;
    --text-2:        #B4B1A5;
    --muted:         #85826F;
    --text-invert:   var(--neutral-900);

    --border:        #2E2D25;
    --border-strong: #45443A;

    --accent:        #6FA8E0;
    --accent-hover:  #8ABBEA;
    --accent-active: #A5CCF1;
    --on-accent:     #0C2036;
    --accent-bg:     #16293D;
    --accent-bg-2:   #1C3854;
    --accent-border: #2C4E74;

    --low:        #74B644;
    --low-bg:     #223317;
    --mid:        #E5A045;
    --mid-bg:     #3A2C13;
    --high:       #E06060;
    --high-bg:    #3D1B1B;
    --success:    #8CC763;
    --warning:    #E5A045;
    --danger:     #E37070;

    --chart-grid:   #262520;
    --chart-axis:   #3E3C33;
    --chart-label:  #85826F;
    --series-you:        #6FA8E0;
    --series-you-soft:   #1C3854;
    --series-median:     #6B685E;
    --series-median-soft:#34322C;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 20px 48px -8px rgba(0, 0, 0, 0.65);
    --ring: 0 0 0 3px #1C3854;

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:            var(--neutral-950);
  --bg-subtle:     #101009;
  --card:          #1E1D18;
  --surface:       #24231C;
  --surface-2:     #2A2921;

  --text:          #F2F0E9;
  --text-2:        #B4B1A5;
  --muted:         #85826F;
  --text-invert:   var(--neutral-900);

  --border:        #2E2D25;
  --border-strong: #45443A;

  --accent:        #6FA8E0;
  --accent-hover:  #8ABBEA;
  --accent-active: #A5CCF1;
  --on-accent:     #0C2036;
  --accent-bg:     #16293D;
  --accent-bg-2:   #1C3854;
  --accent-border: #2C4E74;

  --low:        #74B644;
  --low-bg:     #223317;
  --mid:        #E5A045;
  --mid-bg:     #3A2C13;
  --high:       #E06060;
  --high-bg:    #3D1B1B;
  --success:    #8CC763;
  --warning:    #E5A045;
  --danger:     #E37070;

  --chart-grid:   #262520;
  --chart-axis:   #3E3C33;
  --chart-label:  #85826F;
  --series-you:        #6FA8E0;
  --series-you-soft:   #1C3854;
  --series-median:     #6B685E;
  --series-median-soft:#34322C;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 20px 48px -8px rgba(0, 0, 0, 0.65);
  --ring: 0 0 0 3px #1C3854;

  color-scheme: dark;
}

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  font-weight: var(--w-reg);
  line-height: var(--lh-body);
}
h1, h2, h3 { font-weight: var(--w-semi); letter-spacing: -0.01em; }
strong, b { font-weight: var(--w-med); }
button { font: inherit; cursor: pointer; color: inherit; }
input, select { font: inherit; color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.num { font-family: var(--font-data); font-feature-settings: "tnum"; letter-spacing: -0.02em; }
::selection { background: var(--accent-bg-2); }