/* ============================================================
   Vasl Health — Colors & Type
   Verbatim from the Vasl Health design system
   (_ds/vasl-health-design-system-3fcbae4f/colors_and_type.css),
   with ONE change: the upstream file opens with an `@import url(...)`
   pointing at a third-party font CDN. That line is removed.
   VASL-VLAP-SCOPE-001 v1.2 and the build brief
   for this surface both say nothing Google, and a font CDN is a
   request to Google on every page load. The same two families are
   served from fonts/ instead — the .woff2 files already tracked in
   this repo for the portals.
   ============================================================ */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-variable-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
:root {
  /* ---------- Brand colors (from onboarding doc) ---------- */
  --vasl-green: #2d5f4f;       /* Primary  — deep green */
  --vasl-clay:  #d4a574;       /* Accent   — clay */
  --vasl-base:  #fafaf8;       /* Base     — warm white */

  /* ---------- Derived clay scale (warm neutrals) ---------- */
  --clay-50:  #faf6f0;
  --clay-100: #f3ebdd;
  --clay-200: #e9dcc4;
  --clay-300: #ddc9a4;
  --clay-400: #d4a574;         /* = accent */
  --clay-500: #c08e58;
  --clay-600: #a37346;
  --clay-700: #7d5736;

  /* ---------- Green scale ---------- */
  --green-50:  #eef3f0;
  --green-100: #d6e2dc;
  --green-200: #a9c2b6;
  --green-300: #7aa091;
  --green-400: #4f806e;
  --green-500: #2d5f4f;        /* = primary */
  --green-600: #244c3f;
  --green-700: #1a382f;
  --green-800: #11241e;
  --green-900: #0a1814;

  /* ---------- Warm neutrals (paper) ---------- */
  --ink-900: #1a1614;          /* near-black, warm */
  --ink-700: #3d3631;
  --ink-500: #6b6259;
  --ink-400: #8a8077;
  --ink-300: #b5ada3;
  --ink-200: #d9d2c7;
  --ink-100: #ece6db;
  --paper:   #fafaf8;          /* = base */
  --paper-2: #f4f0e8;          /* slightly toasted */
  --paper-3: #ece6db;          /* card edges, dividers */

  /* ---------- Semantic foreground / background ---------- */
  --bg:        var(--paper);
  --bg-elev:   #ffffff;
  --bg-sunken: var(--paper-2);
  --fg1:       var(--ink-900);
  --fg2:       var(--ink-700);
  --fg3:       var(--ink-500);
  --fg-muted:  var(--ink-400);
  --fg-on-green: #f3ece0;
  --fg-on-clay:  var(--green-700);

  --border:        #e6dfd2;
  --border-strong: #c7bda9;
  --border-on-dark: rgba(243,236,224,0.16);

  --accent:      var(--vasl-clay);
  --primary:     var(--vasl-green);
  --primary-ink: #ffffff;
  --link:        var(--vasl-green);
  --link-hover:  var(--green-600);

  /* ---------- Status (clinical signal palette) ---------- */
  /* Tuned warm so it sits on warm-white without screaming. */
  --signal-critical: #b3361f;  /* red-clay */
  --signal-high:     #c46a2a;  /* burnt amber */
  --signal-med:      #b88a2a;  /* mustard */
  --signal-low:      #4f806e;  /* muted green */
  --signal-info:     #3a6a8a;  /* slate teal */
  --signal-critical-bg: #f7e3dd;
  --signal-high-bg:     #f7e7d4;
  --signal-med-bg:      #f5ecd3;
  --signal-low-bg:      #dee8e2;
  --signal-info-bg:     #dde6ed;

  /* ---------- Typography ---------- */
  --font-serif: "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Display scale — Newsreader, 500, sentence case */
  --display-1: 64px;   /* hero */
  --display-2: 48px;
  --h1: 40px;
  --h2: 32px;
  --h3: 24px;
  --h4: 20px;
  --body-lg: 18px;
  --body:    16px;     /* IBM Plex Sans 400 / 1.7 */
  --body-sm: 14px;
  --caption: 13px;
  --mono:    13px;     /* IBM Plex Mono 13px */

  --lh-tight: 1.15; /* @kind font */
  --lh-snug:  1.3; /* @kind font */
  --lh-body:  1.7; /* @kind font */
  --lh-loose: 1.85; /* @kind font */

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;

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

  /* ---------- Radius ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;     /* default for buttons / inputs */
  --r-lg: 10px;    /* cards */
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- Shadow (soft, paper-like) ---------- */
  --shadow-1: 0 1px 0 rgba(26,22,20,0.04), 0 1px 2px rgba(26,22,20,0.05);
  --shadow-2: 0 2px 4px rgba(26,22,20,0.05), 0 4px 12px rgba(26,22,20,0.06);
  --shadow-3: 0 8px 16px rgba(26,22,20,0.07), 0 16px 32px rgba(26,22,20,0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(26,22,20,0.04);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur:      180ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        var(--green-900);
    --bg-elev:   var(--green-800);
    --bg-sunken: #07120f;
    --fg1:       #f3ece0;
    --fg2:       #d8cfbf;
    --fg3:       #a89f8d;
    --fg-muted:  #7a7264;
    --border:        rgba(243,236,224,0.10);
    --border-strong: rgba(243,236,224,0.22);
    --primary:     var(--clay-400);
    --primary-ink: var(--green-900);
    --link:        var(--clay-300);
    --link-hover:  var(--clay-200);
  }
}
.theme-dark {
  --bg:        var(--green-900);
  --bg-elev:   var(--green-800);
  --bg-sunken: #07120f;
  --fg1:       #f3ece0;
  --fg2:       #d8cfbf;
  --fg3:       #a89f8d;
  --fg-muted:  #7a7264;
  --border:        rgba(243,236,224,0.10);
  --border-strong: rgba(243,236,224,0.22);
  --primary:     var(--clay-400);
  --primary-ink: var(--green-900);
  --link:        var(--clay-300);
}

/* ============================================================
   Semantic element styles
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .display-1, .display-2 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  /* sentence case — do not text-transform */
  margin: 0;
}
.display-1 { font-size: var(--display-1); line-height: 1.05; }
.display-2 { font-size: var(--display-2); line-height: 1.1; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: var(--lh-snug); }
h4 { font-size: var(--h4); line-height: var(--lh-snug); }

p, .body { font-size: var(--body); line-height: var(--lh-body); color: var(--fg2); }
.body-lg { font-size: var(--body-lg); line-height: var(--lh-body); }
.body-sm { font-size: var(--body-sm); line-height: 1.55; color: var(--fg2); }
.caption { font-size: var(--caption); line-height: 1.45; color: var(--fg3); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg3);
}

code, pre, .mono, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--mono);
}
code {
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  color: var(--green-700);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--link-hover); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-5) 0;
}

::selection { background: var(--clay-200); color: var(--green-700); }