/* ==========================================================================
   Design tokens
   Client brand colors come from the Website Questionnaire.
   Everything under "Supporting interface colors" is a recommended UI neutral,
   NOT an official client brand color.
   ========================================================================== */

:root {
  /* --- Client brand colors (questionnaire) --- */
  --color-primary: #1e40ae; /* Royal Blue — white text on this = ~8.75:1 */
  --color-accent: #2dd4bf; /* Turquoise / Mint — NEVER behind small white text (~1.86:1) */
  --color-white: #ffffff;

  /* --- Supporting interface colors (not client-specified) --- */
  --color-primary-dark: #172f82;
  --color-primary-darker: #0f1f5c;
  --color-primary-tint: #eef2fc;
  --color-accent-tint: #e6faf7;
  --color-accent-strong: #0f766e; /* mint-family color safe for text on white (~5.4:1) */
  --color-text: #111827;
  --color-muted: #4b5563;
  --color-surface: #f8fafc;
  --color-border: #e5e7eb;
  --color-border-strong: #cbd5e1;
  --color-error: #b91c1c;
  --color-error-tint: #fef2f2;
  --color-success: #047857;
  --color-success-tint: #ecfdf5;
  --color-disabled: #9ca3af;

  /* --- Typography ---
     No client typeface was supplied. This is a neutral system stack and is
     NOT part of the official brand identity. Swap --font-sans once a brand
     font is approved (place files in /assets/fonts/). */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.125rem, 1.6vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 2.2vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 3.2vw, 2.375rem);
  --text-3xl: clamp(2.125rem, 5vw, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.6;

  /* --- Spacing --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-section: clamp(3.5rem, 7vw, 6rem);

  /* --- Layout --- */
  --container: 75rem;
  --container-narrow: 48rem;
  --measure: 65ch;

  /* --- Shape & depth --- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --shadow-sm: 0 1px 2px rgb(15 31 92 / 0.06), 0 1px 3px rgb(15 31 92 / 0.08);
  --shadow-md: 0 4px 12px rgb(15 31 92 / 0.08), 0 2px 4px rgb(15 31 92 / 0.06);
  --shadow-lg: 0 18px 40px rgb(15 31 92 / 0.16);

  /* --- Motion --- */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- Interaction --- */
  --target-min: 2.75rem; /* 44px — comfortably above WCAG 2.2 AA 24px minimum */
  --focus-ring: 3px solid var(--color-primary);
}