:root {
  /* ---- Brand palette — extracted from logo.png ---- */
  /* Palette source: quantized from logo pixels (extract_palette.py) */
  /* #044A9E 11514px, #6CC5FC 9685px, #589FDC 7151px, #06408E 6305px */
  --brand-primary:     #044A9E;   /* deep navy — dominant blue, wordmark */
  --brand-primary-700: #06408E;   /* darker navy — hover / active states */
  --brand-accent:      #6CC5FC;   /* sky blue — icon highlights, CTA ring */
  --brand-secondary:   #589FDC;   /* cornflower blue — secondary elements */

  /* ---- Neutrals ---- */
  --ink:       #0D1E3D;           /* very dark navy — body text, headings */
  --ink-soft:  #4A5F82;           /* muted navy-grey — secondary / muted text */
  --sand:      #EFF4FB;           /* pale blue-white — page background */
  --surface:   #FFFFFF;           /* card / form backgrounds */
  --line:      #C8D8EE;           /* light blue border / hairline */

  /* ---- Semantic aliases (use these in components, never raw hex) ---- */
  --color-bg:           var(--sand);
  --color-surface:      var(--surface);
  --color-text:         var(--ink);
  --color-text-muted:   var(--ink-soft);
  --color-border:       var(--line);
  --color-action:       var(--brand-primary);
  --color-action-hover: var(--brand-primary-700);
  --color-highlight:    var(--brand-accent);
  --color-link:         var(--brand-primary);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero:  clamp(2.25rem, 5vw, 3.75rem);
  --fs-h1:    clamp(1.875rem, 3.5vw, 2.75rem);
  --fs-h2:    clamp(1.4rem, 2.5vw, 1.875rem);
  --fs-h3:    clamp(1.1rem, 1.8vw, 1.35rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --lh-tight: 1.15;
  --lh-body:  1.65;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ---- Shape & shadow ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;
  --shadow-sm:   0 1px 3px rgba(4, 30, 61, .07);
  --shadow-md:   0 8px 24px rgba(4, 30, 61, .12);
  --shadow-lg:   0 20px 48px rgba(4, 30, 61, .16);

  /* ---- Layout ---- */
  --container: 1200px;
}