/* Design system tokens. Colours are the "Modern Care" palette. */
:root {
  /* Palette (roles from the brief) */
  --color-background: #F1F5F9;
  --color-surface: #FFFFFF;
  --color-text: #1E293B;
  --color-muted: #606F85;
  --color-primary: #1E3A8A;
  --color-on-primary: #FFFFFF;
  --color-accent: #B45309;
  --dark: #0F172A;
  --on-dark: #F1F5F9;

  /* Lightness-only adjustments so text passes 4.5:1 on the Dark band */
  --accent-on-dark: #F0A04B;
  --muted-on-dark: #A9B6C9;

  /* Tints and hairlines blended from the palette */
  --color-border: #DAE1EB;
  --line-dark: #27334D;
  --field-border: var(--color-muted); /* form controls need 3:1 against the surface */
  --primary-tint: #E4EAF7;
  --accent-tint: #FBF1E6;
  --grad-main: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --grad-wash: radial-gradient(60rem 30rem at 85% -10%, var(--accent-tint) 0%, transparent 70%);

  /* Type */
  --font-heading: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --text-display: clamp(2.5rem, 1.5rem + 4.2vw, 3.75rem);
  --text-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --text-lead: 1.125rem;
  --text-sm: 0.875rem;

  /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96) */
  --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-9: 6rem;

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --shadow-float: 0 20px 44px -14px rgba(15, 23, 42, 0.28);
  --container: 1180px;
  --gutter: 1.25rem;
  --text-base: 1rem;
}