/*
 * Design tokens: the one place for colours, type, spacing, radii, shadows and widths (2026-11-10).
 * Loaded on every page before style.css. Unlayered, so every stylesheet can use them.
 *
 * Rules (CLAUDE.md "Design Preferences and Restrictions"):
 *   - Hover changes colour, background or border only. No translateY, no lift, no scale.
 *   - Shadows are neutral grey only. Never red, coral or pink.
 *   - No left-border accent bars; use a card (1px border, radius, soft background).
 *
 * The older names in style.css (--primary-blue, --spacing-md, --light-gray ...) keep working.
 * New CSS uses the names below. Breakpoints (custom properties cannot be used in @media):
 *   phone <= 480px, tablet <= 768px, small laptop <= 1024px, desktop >= 1200px.
 */
:root {
  /* Brand primitives. Contrast is for white text on the colour. */
  --navy-900: #0f2440;   /* 15.3:1 */
  --navy-800: #152B4A;   /* 13.4:1  (= --primary-dark) */
  --navy-700: #1B365D;   /* 11.6:1  (= --primary-blue) */
  --blue-600: #1f5fae;   /* 6.3:1   links and focus on white */
  --blue-50:  #e9f1fb;
  --red-700:  #B71C1C;   /* 6.6:1 */
  --red-600:  #D63031;   /* 4.9:1   the call-to-action red */
  --coral-400: #FF6B6B;  /* 2.8:1   decorative only, never behind white text */
  --gold-300: #f5c66a;

  /* Neutral scale */
  --gray-50:  #f5f8fc;
  --gray-100: #eef2f7;
  --gray-200: #dfe6ef;
  --gray-300: #c9d3e0;
  --gray-500: #6c7a8c;
  --gray-600: #55657a;   /* 5.9:1 on white */
  --gray-700: #3d4a5c;
  --gray-800: #13233a;

  /* Semantic colours: use these in components */
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-heading: var(--gray-800);
  --color-link: var(--blue-600);
  --color-surface: #ffffff;
  --color-surface-alt: var(--gray-50);
  --color-border: var(--gray-200);
  --color-cta: var(--red-600);
  --color-cta-hover: var(--red-700);
  --color-focus: var(--blue-600);
  --text-color: var(--color-text);           /* used by hospitals.css, was undefined */

  /* Type */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-text: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: var(--font-text);       /* used by main.css, was undefined */
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --fs-h1: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  --lh-tight: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.6;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  --gutter: clamp(1rem, 0.6rem + 1.5vw, 1.5rem);

  /* Widths */
  --container-max: 1240px;
  --container-text: 760px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 10px 20px rgba(0, 0, 0, 0.1);
  --tap-min: 44px;
  --dur: 0.2s;
}