/* ==========================================================================
   Design tokens. The single source of truth for colour, type, space and depth.
   Nothing in this file selects an element; it only declares custom properties.
   Load order: tokens -> base -> layout -> components.
   ========================================================================== */

:root {
  /* ---- Brand: primary (deep clinical blue) -------------------------------
     600 is the brand value. White text on 600 is 6.3:1, so it is the only
     brand colour safe for solid buttons and filled bands. */
  --blue-50: #f0f6fa;
  --blue-100: #dcebf4;
  --blue-200: #bcd8e8;
  --blue-300: #8fbcd6;
  --blue-400: #5b99bf;
  --blue-500: #3a7da8;
  --blue-600: #1e668e;
  --blue-700: #1a5577;
  --blue-800: #184763;
  --blue-900: #173c53;
  --blue-950: #0f2737;

  /* ---- Brand: accent (signature green) ----------------------------------
     500 is the historic brand green. White text on it is only 2.6:1, so 500
     is for tints, borders and dark-text surfaces only. Use 600 (5.6:1) when
     white text sits on top. */
  --green-50: #f4f9ec;
  --green-100: #e6f2d6;
  --green-200: #cfe5b2;
  --green-300: #b0d384;
  --green-400: #93c15c;
  --green-500: #7faf41;
  --green-600: #4f7129;
  --green-700: #415c23;
  --green-800: #364a20;
  --green-900: #2e3f1e;

  /* ---- Neutrals (very slightly blue-tinted, to sit with the primary) ---- */
  --neutral-0: #ffffff;
  --neutral-25: #fbfcfd;
  --neutral-50: #f6f8fa;
  --neutral-100: #eef1f5;
  --neutral-200: #dfe4ea;
  --neutral-300: #c6cfd9;
  --neutral-400: #98a5b3;
  --neutral-500: #6b7a8a;
  --neutral-600: #4f5d6b;
  --neutral-700: #3b4754;
  --neutral-800: #2a333d;
  --neutral-900: #1b2127;
  --neutral-950: #0f1317;

  /* ---- Status ----------------------------------------------------------- */
  --danger: #b00020;
  --danger-bg: #fdf2f3;
  --success: #1f7a3d;
  --success-bg: var(--green-50);
  --warning: #8a5a00;
  --warning-bg: #fdf7e8;

  /* ---- Semantic aliases: use these in components, not the scales above -- */
  --color-bg: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-sunken: var(--neutral-100);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);

  --color-heading: var(--neutral-900);
  --color-text: var(--neutral-700); /* 9.4:1 on white */
  --color-text-muted: var(--neutral-600); /* 6.7:1 on white */
  --color-text-subtle: var(--neutral-500); /* large text and metadata only */
  --color-text-on-dark: var(--neutral-0);
  --color-text-on-dark-muted: #d7e2ea;

  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-active: var(--blue-800);
  --color-accent: var(--green-500);
  --color-accent-solid: var(--green-600);
  --color-accent-solid-hover: var(--green-700);

  --color-link: var(--blue-700);
  --color-link-hover: var(--blue-900);

  /* ---- Type ------------------------------------------------------------- */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale: min at 360px viewport, max at 1280px. */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.957rem + 0.19vw, 1.0625rem);
  --fs-md: clamp(1.0625rem, 1.019rem + 0.19vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1.04rem + 0.38vw, 1.25rem);
  --fs-xl: clamp(1.25rem, 1.12rem + 0.57vw, 1.4375rem);
  --fs-2xl: clamp(1.375rem, 1.14rem + 1.04vw, 1.75rem);
  --fs-3xl: clamp(1.625rem, 1.24rem + 1.7vw, 2.1875rem);
  --fs-4xl: clamp(2rem, 1.5rem + 2.17vw, 2.75rem);
  --fs-5xl: clamp(2.25rem, 1.56rem + 3.02vw, 3.25rem);

  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-heading: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* Comfortable reading measure for long-form medical prose. */
  --measure: 68ch;

  /* ---- Space (4px base) ------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Vertical rhythm for page sections. Replaces the per-section
     inline padding that used to be written by hand on every page. */
  --section-y: clamp(2.5rem, 1.4rem + 4.8vw, 4.5rem);
  --section-y-sm: clamp(1.75rem, 1.1rem + 2.9vw, 3rem);
  --section-y-lg: clamp(3.5rem, 1.9rem + 7vw, 6.5rem);

  /* ---- Radius ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Elevation (blue-tinted, soft) ------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(15, 39, 55, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 39, 55, 0.08), 0 1px 2px rgba(15, 39, 55, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 39, 55, 0.08), 0 2px 4px rgba(15, 39, 55, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 39, 55, 0.1), 0 4px 10px rgba(15, 39, 55, 0.05);
  --shadow-xl: 0 24px 48px rgba(15, 39, 55, 0.12), 0 8px 16px rgba(15, 39, 55, 0.06);

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 0.6rem + 1.7vw, 1.75rem);
  --topbar-h: 44px;
  --nav-h: 72px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring: 0 0 0 3px rgba(30, 102, 142, 0.35);
  --focus-ring-offset: 2px;

  /* ---- Z-index ladder ---------------------------------------------------
     Declared once so no component has to guess, and nothing needs 10000. */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 1000;
  --z-topbar: 1020;
  --z-nav: 1030;
  --z-mobile-bar: 1040;
  --z-backdrop: 1050;
  --z-modal: 1060;
  --z-toast: 1070;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}