/* ===========================================================
   ICEO — Design Tokens
   Cold plunge / recovery brand. Premium wellness, performance.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- BRAND COLORS (from ICEO_Kleurenkaart_RGB) ---------- */
  /* Primary: GREEN family — energy, vitality, the "ice rush" */
  --iceo-green:        #14e81f;  /* signal green — primary brand */
  --iceo-green-light:  #adf7b0;  /* surface tint, subtle backgrounds */
  --iceo-green-dark:   #00ab0a;  /* hover, pressed, on-light type */

  /* Primary: PURPLE family — calm, recovery, depth */
  --iceo-purple:        #4a2b8c;  /* deep brand purple — headings, frames */
  --iceo-purple-dark:   #260149;  /* near-black for body, dark mode bg */
  --iceo-purple-light:  #d4cddb;  /* lavender mist — soft surfaces */
  --iceo-lavender:      #db99db;  /* tertiary, illustrative */

  /* ACCENT */
  --iceo-pink:          #a800a8;  /* magenta accent — sparingly, for emphasis */

  /* ---------- NEUTRALS ---------- */
  /* Built off the purple line so neutrals feel native to the system */
  --neutral-0:    #ffffff;
  --neutral-50:   #faf9fb;
  --neutral-100:  #f3f1f5;
  --neutral-200:  #e6e2eb;
  --neutral-300:  #c9c1d2;
  --neutral-400:  #948aa3;
  --neutral-500:  #635877;
  --neutral-600:  #443a57;
  --neutral-700:  #2c2440;
  --neutral-800:  #1a1230;
  --neutral-900:  #0d0820;
  --neutral-ink:  #260149;       /* alias of --iceo-purple-dark */

  /* ---------- SEMANTIC ---------- */
  --color-bg:           var(--neutral-0);
  --color-bg-soft:      var(--neutral-50);
  --color-bg-tinted:    #f5f0fa;        /* warm purple tint */
  --color-surface:      var(--neutral-0);
  --color-ink:          var(--iceo-purple-dark);
  --color-ink-muted:    var(--neutral-500);
  --color-ink-soft:     var(--neutral-400);
  --color-border:       var(--neutral-200);
  --color-border-strong:var(--neutral-300);
  --color-primary:      var(--iceo-green);
  --color-primary-ink:  var(--iceo-purple-dark);   /* type that sits ON green */
  --color-accent:       var(--iceo-pink);

  --color-success:      var(--iceo-green-dark);
  --color-warning:      #e8a514;
  --color-danger:       #d23b3b;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;  /* used for editorial accents only */

  /* Type scale — wellness brands lean larger; tight tracking */
  --fs-display:  clamp(64px, 9vw, 132px);
  --fs-h1:       clamp(44px, 6vw, 80px);
  --fs-h2:       clamp(34px, 4.4vw, 56px);
  --fs-h3:       clamp(26px, 3vw, 36px);
  --fs-h4:       22px;
  --fs-lead:     20px;
  --fs-body:     17px;
  --fs-small:    15px;
  --fs-micro:    13px;
  --fs-eyebrow:  12px;

  --lh-tight:    0.95;
  --lh-snug:     1.1;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.18em;

  /* ---------- SPACING (4pt base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-2xl:  48px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs:  0 1px 2px rgba(38, 1, 73, 0.06);
  --shadow-sm:  0 2px 8px rgba(38, 1, 73, 0.06), 0 1px 2px rgba(38, 1, 73, 0.04);
  --shadow-md:  0 8px 24px rgba(38, 1, 73, 0.08), 0 2px 6px rgba(38, 1, 73, 0.04);
  --shadow-lg:  0 24px 60px rgba(38, 1, 73, 0.12), 0 4px 12px rgba(38, 1, 73, 0.06);
  --shadow-glow:0 0 0 6px rgba(20, 232, 31, 0.18);

  /* ---------- LAYOUT ---------- */
  --container:    1280px;
  --container-wide: 1480px;
  --gutter:       clamp(20px, 4vw, 48px);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;
}

/* ---------- BASE RESETS ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }

button { font: inherit; cursor: pointer; }

a { color: inherit; text-decoration: none; }

::selection {
  background: var(--iceo-green);
  color: var(--iceo-purple-dark);
}

/* ---------- TYPOGRAPHY UTILITIES ---------- */
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 800; }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 800; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 700; }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 700; }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); font-weight: 400; color: var(--color-ink-muted); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-normal); }
.t-micro { font-size: var(--fs-micro); line-height: var(--lh-normal); }
.t-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--iceo-purple);
}
.t-serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }