/*
 * Design tokens — Igloo / Heliomed
 * Palette: deep brand blue (#003d60, from the logo) + bright warm yellow accent,
 * with the logo's orange as a sparing secondary. Cool off-white ground (not cream).
 * All text/background pairs below are contrast-checked (body >= 4.5:1, large >= 3:1).
 */
:root {
  /* ---- Brand ---- */
  --blue:        #003d60; /* primary brand — logo blue */
  --blue-700:    #00557f; /* links / interactive blue on light */
  --blue-600:    #0a6a9a; /* hover / bright accent */
  --blue-950:    #042231; /* darkest — dark sections / footer */
  --blue-50:     #eef4f8; /* pale tint surface */
  --blue-100:    #dceaf2;

  --yellow:      #ffc62b; /* accent — CTAs, highlights (use with --ink text) */
  --yellow-deep: #f0b000; /* yellow hover */
  --yellow-soft: #fff4d4; /* pale yellow wash */

  --orange:      #fe9c33; /* logo orange — secondary warm, used sparingly */

  /* ---- Neutrals / ground ---- */
  --bg:          #fbfcfd; /* page background — cool off-white */
  --surface:     #ffffff;
  --surface-2:   #f4f7f9;
  --ink:         #0b1a26; /* primary text on light (~14:1 on --bg) */
  --ink-muted:   #4d5f6e; /* secondary text on light (~7:1 on --bg) */
  --ink-faint:   #6f8190; /* captions/meta (~4.7:1 on --bg) */
  --line:        #dde6ec;
  --line-strong: #c6d3dc;

  /* ---- On dark-blue surfaces ---- */
  --on-dark:        #eaf3f8;
  --on-dark-muted:  #a7c1d1;
  --on-dark-line:   rgba(255, 255, 255, 0.14);

  /* ---- Status (forms) ---- */
  --ok:   #1f8a4c;
  --ok-bg:#e8f6ee;
  --err:  #c4341f;
  --err-bg:#fbeae7;

  /* ---- Typography ---- */
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* --font-mono now carries Manrope — the label/eyebrow font (gcclean parity),
     NOT a monospace. Name kept to avoid churn across components. */
  --font-mono:    'Manrope', ui-sans-serif, system-ui, sans-serif;

  /* Fluid type scale (1.20 minor-third-ish, capped per display ceiling <= ~6rem) */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1.0625rem;                              /* ~17px body */
  --fs-md:   clamp(1.18rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-lg:   clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  --fs-xl:   clamp(1.85rem, 1.5rem + 1.6vw, 2.6rem);
  --fs-2xl:  clamp(2.4rem, 1.9rem + 2.6vw, 3.6rem);
  --fs-3xl:  clamp(2.9rem, 2.1rem + 3.8vw, 5rem);    /* hero — stays under 6rem */

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.6;

  --measure: 68ch; /* prose line-length cap */

  /* ---- Spacing ---- */
  --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: 4.5rem;
  --space-9: 6.5rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --container:  72rem;
  --container-wide: 80rem;
  --gutter: clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadow / glow ---- */
  --shadow-sm: 0 1px 2px rgba(4, 35, 49, 0.06), 0 1px 3px rgba(4, 35, 49, 0.08);
  --shadow-md: 0 6px 18px -6px rgba(4, 35, 49, 0.18), 0 2px 6px rgba(4, 35, 49, 0.08);
  --shadow-lg: 0 28px 60px -20px rgba(4, 35, 49, 0.34), 0 8px 20px -10px rgba(4, 35, 49, 0.2);
  --glow-yellow: 0 0 0 6px rgba(255, 198, 43, 0.18);

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ---- Motion ---- */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-mid:  0.32s;
  --dur-slow: 0.6s;
}