/* ============================================================
   PureAqua Design System — Foundations
   Source: Merkconcept - PureAqua.pdf
   ============================================================ */

/* Montserrat — primary brand typeface (variable font, all weights 100–900) */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Italic face omitted: nothing on this page renders in italic. */

:root {
  /* ----------------------------------------------------------
     COLOR — Brand palette
     The four brand colors come from the PDF (Pantone-matched).
     Each ships as a 4-stop tint scale (25/50/75/100%) — this
     ladder is part of the system, used for soft backgrounds,
     section bands and water-like layering.
     ---------------------------------------------------------- */

  /* Deep Sea — primary brand color (PMS 7546 C) */
  --pa-deep-100:   #1f4054;
  --pa-deep-75:    #57708a;
  --pa-deep-50:    #8fa0a9;
  --pa-deep-25:    #c7cfd4;

  /* Aqua — secondary signature (PMS 563 C) */
  --pa-aqua-100:   #5bbdb2;
  --pa-aqua-75:    #84cec5;
  --pa-aqua-50:    #addedc;
  --pa-aqua-25:    #d6efed;

  /* Mist — soft mid (PMS 324 C) */
  --pa-mist-100:   #91d0d0;
  --pa-mist-75:    #acdcdc;
  --pa-mist-50:    #c8e7e7;
  --pa-mist-25:    #e3f3f3;

  /* Sky — palest (PMS 7457 C) */
  --pa-sky-100:    #bde3f2;
  --pa-sky-75:     #cdebf5;
  --pa-sky-50:     #def1f8;
  --pa-sky-25:     #eef8fc;

  /* Neutral ladder — derived from Deep Sea, desaturated */
  --pa-white:      #ffffff;
  --pa-off-white:  #f7fafb;   /* page bg, freshness */
  --pa-paper:      #eef2f4;
  --pa-line:       #dde4e8;   /* hairline borders */
  --pa-line-soft:  #ebeff2;
  --pa-ink-50:     #6b7d89;   /* secondary text */
  --pa-ink-30:     #9aa7b0;   /* tertiary text, captions */
  --pa-ink:        #1f4054;   /* alias of deep-100 — body text */
  --pa-ink-deep:   #11283a;   /* near-black for headings */

  /* Semantic — kept restrained to fit the calm/premium tone */
  --pa-success:    #5bbdb2;   /* aqua doubles as positive */
  --pa-info:       #5b9fcc;
  --pa-warning:    #d99c5b;
  --pa-danger:     #c0594e;

  /* ----------------------------------------------------------
     SEMANTIC COLOR TOKENS
     ---------------------------------------------------------- */
  --fg-1:          var(--pa-ink-deep);    /* headings */
  --fg-2:          var(--pa-ink);         /* body */
  --fg-3:          var(--pa-ink-50);      /* secondary */
  --fg-4:          var(--pa-ink-30);      /* tertiary, captions */
  --fg-on-dark:    var(--pa-white);
  --fg-on-aqua:    var(--pa-ink-deep);

  --bg-1:          var(--pa-white);       /* surface */
  --bg-2:          var(--pa-off-white);   /* page */
  --bg-3:          var(--pa-paper);       /* recessed */
  --bg-soft:       var(--pa-sky-25);      /* tinted band */
  --bg-deep:       var(--pa-deep-100);    /* hero / footer */

  --accent:        var(--pa-aqua-100);    /* primary CTA */
  --accent-hover:  #4eaba0;
  --accent-press:  #3f9690;

  --border:        var(--pa-line);
  --border-soft:   var(--pa-line-soft);
  --border-strong: var(--pa-deep-50);

  /* ----------------------------------------------------------
     TYPE — family + weights
     Montserrat is the only typeface in the system. The PDF
     specifies the full weight range; we map them to roles.
     ---------------------------------------------------------- */
  --font-sans:     'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:  var(--font-sans);
  --font-mono:     ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fw-thin:       100;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* ----------------------------------------------------------
     TYPE SCALE — modular, calm
     Display sizes use light/thin weights with wide tracking,
     echoing the wordmark's airy uppercase feel.
     ---------------------------------------------------------- */
  --fs-display-xl: clamp(48px, 6vw, 88px);
  --fs-display:    clamp(40px, 4.6vw, 64px);
  --fs-h1:         clamp(32px, 3.4vw, 48px);
  --fs-h2:         clamp(26px, 2.6vw, 36px);
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;

  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  /* Tracking — the wordmark is widely spaced; pay-offs use
     even wider tracking. We carry that into the system. */
  --ls-tight:      -0.01em;
  --ls-normal:     0;
  --ls-wide:       0.04em;
  --ls-wider:      0.12em;     /* eyebrows, pay-off lockups */
  --ls-widest:     0.22em;     /* "HET ZUIVERSTE WATER" feel */

  /* ----------------------------------------------------------
     SPACING — 4px base, generous
     Whitespace is a brand value. Defaults skew large.
     ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ----------------------------------------------------------
     RADII — soft, never sharp, never pill-everything
     ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ----------------------------------------------------------
     SHADOWS — water-soft. Long, low-opacity, blue-tinted.
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(31, 64, 84, 0.06);
  --shadow-sm: 0 2px 8px rgba(31, 64, 84, 0.06), 0 1px 2px rgba(31, 64, 84, 0.04);
  --shadow-md: 0 8px 24px rgba(31, 64, 84, 0.08), 0 2px 6px rgba(31, 64, 84, 0.04);
  --shadow-lg: 0 20px 48px rgba(31, 64, 84, 0.10), 0 4px 12px rgba(31, 64, 84, 0.06);
  --shadow-xl: 0 32px 80px rgba(31, 64, 84, 0.14);
  --shadow-inner: inset 0 1px 2px rgba(31, 64, 84, 0.06);
  --shadow-focus: 0 0 0 3px rgba(91, 189, 178, 0.35);

  /* ----------------------------------------------------------
     MOTION — calm easing, slow enough to feel composed
     ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container:    1200px;
  --container-narrow: 880px;
  --gutter:       clamp(16px, 4vw, 48px);
}

/* ============================================================
   ELEMENT STYLES
   ============================================================ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-2);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.payoff {
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

a {
  color: var(--pa-deep-100);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: currentColor; }

::selection { background: var(--pa-aqua-50); color: var(--pa-ink-deep); }