/* ============================================================
   MedRoute Design System — Core Tokens
   Source of truth: medical-data-discovery/prototype/index.html
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --bg: #f6f2ec;              /* warm off-white paper */
  --bg-elevated: #ffffff;     /* cards, panels */
  --bg-sunken: #f3ede4;       /* chip backgrounds, sunken rows */
  --bg-dark: linear-gradient(180deg, #143358 0%, #0d2542 100%);

  /* ---- Ink (foreground) ---- */
  --ink: #0f1d2e;             /* primary body */
  --ink-secondary: #334155;   /* supporting copy */
  --ink-muted: #64748b;       /* micro-labels, captions */
  --ink-inverse: #e8e0d5;     /* body on dark navy */
  --ink-inverse-strong: #ffffff;

  /* ---- Brand accents ---- */
  --navy: #0b2447;            /* editorial display ink */
  --navy-soft: #16345c;       /* hover for navy buttons */
  --accent: #b4533a;          /* terracotta — MedRoute primary action */
  --accent-hover: #9a3f29;
  --accent-soft: rgba(180,83,58,0.10);
  --sage: #4a7c59;            /* "open" / low friction */
  --gold: #a67c3b;            /* "free_account" / medium friction */

  /* ---- Lines ---- */
  --line: rgba(15,29,46,0.10);
  --line-strong: rgba(15,29,46,0.18);
  --line-inverse: rgba(255,255,255,0.10);

  /* ---- Shadow system ---- */
  --shadow-sm: 0 2px 8px rgba(15,29,46,0.06);
  --shadow: 0 12px 40px rgba(15,29,46,0.10);
  --shadow-lg: 0 24px 64px rgba(15,29,46,0.14);

  /* ---- Radii ---- */
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 30px;
  --radius-pill: 999px;

  /* ---- Spacing scale (editorial, generous) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Semantic signal colors (access / feasibility) ---- */
  --signal-open-bg: rgba(74,124,89,0.25);
  --signal-open-fg: #3d6b48;
  --signal-free-bg: rgba(166,124,59,0.25);
  --signal-free-fg: #7a5c28;
  --signal-medium-bg: rgba(180,131,58,0.20);
  --signal-medium-fg: #7a5c28;
  --signal-high-bg: rgba(180,83,58,0.25);
  --signal-high-fg: #9a3f29;
  --signal-very-high-bg: rgba(180,83,58,0.35);
  --signal-very-high-fg: #9a3f29;
  --signal-neutral-bg: rgba(15,29,46,0.06);
  --signal-neutral-fg: var(--ink-secondary);

  /* ---- Typography families ---- */
  /* Display: editorial serif — Iowan Old Style primary, robust fallbacks.
     We substitute Google Fonts "Source Serif 4" where Iowan isn't available. */
  --font-display: "Iowan Old Style", "Source Serif 4", "Palatino Linotype",
                  "Georgia", "Noto Serif SC", serif;
  /* Body: CJK-first system stack so Chinese copy reads clean on PRC+macOS. */
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "WenQuanYi Micro Hei", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo,
               Consolas, monospace;

  /* ---- Type scale (px @ 1920 container) ----
     Display sizes are clamp-ed; these vars capture the max target. */
  --fs-display-xl: 62px;      /* hero H1 */
  --fs-display-l:  44px;      /* section lead */
  --fs-display-m:  32px;      /* section H2 / prompt */
  --fs-display-s:  26px;      /* card titles */
  --fs-h3:         22px;      /* card H3 */
  --fs-lead:       17px;      /* hero supporting copy */
  --fs-body:       15px;      /* body */
  --fs-body-sm:    14px;      /* meta */
  --fs-caption:    13px;
  --fs-micro:      12px;      /* query labels */
  --fs-kicker:     11px;      /* ALL-CAPS kickers */
  --fs-ultra:      10px;      /* badges, access tags */

  /* ---- Weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* ---- Line heights ---- */
  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em;
  --ls-body: 0;
  --ls-kicker: 0.08em;
  --ls-kicker-wide: 0.14em;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --dur-fast: 160ms;
  --dur-med: 240ms;
}

/* ============================================================
   Base / semantic element styles
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-body);
}

a { color: inherit; text-decoration: none; }

h1, .ds-h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--navy);
  margin: 0;
}

h2, .ds-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: 1.08;
  color: var(--navy);
  margin: 0;
}

h3, .ds-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--navy);
  margin: 0;
}

p, .ds-p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--ink-secondary);
  margin: 0;
}

.ds-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--ink-secondary);
}

.ds-kicker,
.ds-micro-label {
  font-size: var(--fs-kicker);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ds-kicker--accent {
  color: var(--accent);
  letter-spacing: var(--ls-kicker-wide);
}

.ds-prompt {
  /* The distinctive editorial prompt used in hero + section leads */
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.2;
  color: var(--navy);
}

code, .ds-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: 6px;
}