/* ==========================================================================
   Flex Webdiensten — Design Tokens
   Bron: Brand Guide v1.0 (2026)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Lato:wght@300;400;700&display=swap');

:root {
  /* --------------------------------------------------------------------
     COLOR — PRIMARY
     -------------------------------------------------------------------- */
  --flex-blue:        #0097d7;  /* primair — knoppen, links, accenten          */
  --flex-orange:      #f18800;  /* accent — CTA's, highlights                  */
  --flex-dark-blue:   #006faa;  /* basis — headers, koppen, footer             */

  /* PRIMARY TINTS (afgeleid — voor hover / borders / bg-wash)                 */
  --flex-blue-100:    #e5f5fb;
  --flex-blue-200:    #b3e1f2;
  --flex-blue-300:    #66c4e6;
  --flex-blue-500:    #0097d7;  /* = --flex-blue                               */
  --flex-blue-700:    #006faa;  /* = --flex-dark-blue                          */
  --flex-blue-900:    #004469;

  --flex-orange-100:  #fdefdb;
  --flex-orange-300:  #f8bb66;
  --flex-orange-500:  #f18800;  /* = --flex-orange                             */
  --flex-orange-700:  #b86800;

  /* --------------------------------------------------------------------
     COLOR — NEUTRAL
     -------------------------------------------------------------------- */
  --c-ink:            #333333;  /* koppen / primary text                       */
  --c-muted:          #999999;  /* subtekst / captions                         */
  --c-border:         #e5e7eb;  /* 1px dividers, form borders                  */
  --c-bg:             #f5f5f5;  /* pagina-achtergrond                          */
  --c-bg-alt:         #fafafa;
  --c-surface:        #ffffff;  /* cards, inputs                               */

  /* --------------------------------------------------------------------
     COLOR — SEMANTIC (afgeleid)
     -------------------------------------------------------------------- */
  --c-fg:             var(--c-ink);
  --c-fg-muted:       var(--c-muted);
  --c-fg-invert:      #ffffff;
  --c-accent:         var(--flex-blue);
  --c-accent-strong:  var(--flex-dark-blue);
  --c-cta:            var(--flex-orange);
  --c-link:           var(--flex-blue);
  --c-link-hover:     var(--flex-dark-blue);
  --c-focus-ring:     var(--flex-blue);
  --c-success:        #1f9d55;
  --c-warning:        #f18800;     /* orange = warning in brand */
  --c-danger:         #c0392b;

  /* --------------------------------------------------------------------
     GRADIENTS
     -------------------------------------------------------------------- */
  --grad-primary:     linear-gradient(135deg, #006faa 0%, #0097d7 100%);
  --grad-hero-overlay: linear-gradient(180deg, rgba(0,111,170,0) 0%, rgba(0,111,170,.8) 100%);

  /* --------------------------------------------------------------------
     TYPE — FAMILIES
     -------------------------------------------------------------------- */
  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Lato", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --------------------------------------------------------------------
     TYPE — BASE (roles)
     -------------------------------------------------------------------- */
  /* Brand Guide 1pt ≈ 1.333px, but we translate to modern web scale.
     H1 28pt ≈ 37px, H2 20pt ≈ 27px, H3 16pt ≈ 21px, body 11-12pt ≈ 15-16px */
  --fs-h1:   2.25rem;  /* 36px */
  --fs-h2:   1.75rem;  /* 28px */
  --fs-h3:   1.25rem;  /* 20px */
  --fs-h4:   1.125rem; /* 18px */
  --fs-body: 1rem;     /* 16px */
  --fs-sm:   0.9375rem;/* 15px */
  --fs-caption: 0.8125rem; /* 13px */
  --fs-micro: 0.6875rem;   /* 11px */

  --lh-display: 1.2;
  --lh-heading: 1.3;
  --lh-body:    1.6;
  --lh-tight:   1.2;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;

  /* --------------------------------------------------------------------
     SPACING (8-pt grid)
     -------------------------------------------------------------------- */
  --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;

  /* --------------------------------------------------------------------
     RADIUS
     -------------------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------
     SHADOW
     -------------------------------------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(0,111,170,.04);
  --shadow-sm: 0 1px 2px rgba(0,111,170,.06), 0 1px 3px rgba(0,111,170,.04);
  --shadow-md: 0 4px 12px rgba(0,111,170,.08), 0 2px 4px rgba(0,111,170,.04);
  --shadow-lg: 0 12px 32px rgba(0,111,170,.12), 0 4px 8px rgba(0,111,170,.06);
  --shadow-xl: 0 24px 64px rgba(0,111,170,.16);
  --shadow-focus: 0 0 0 3px rgba(0,151,215,.35);

  /* --------------------------------------------------------------------
     BORDERS
     -------------------------------------------------------------------- */
  --border-hair:  1px solid var(--c-border);
  --border-1:     1px solid var(--c-border);
  --border-2:     2px solid var(--flex-blue);

  /* --------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --dur-micro:  150ms;
  --dur-base:   250ms;
  --dur-long:   400ms;

  /* --------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1280px;
  --header-height: 72px;
  --section-py:    80px;
}

/* ==========================================================================
   BASE TYPE ROLES
   Include this stylesheet then add the corresponding class or element.
   ========================================================================== */
html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--c-fg);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--flex-dark-blue);
  margin: 0 0 var(--sp-4);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--flex-dark-blue);
  margin: 0 0 var(--sp-3);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--flex-dark-blue);
  margin: 0 0 var(--sp-2);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--flex-dark-blue);
  margin: 0 0 var(--sp-2);
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  margin: 0 0 var(--sp-4);
}

.caption {
  font-family: var(--font-body);
  font-weight: var(--fw-light, 300);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--c-muted);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flex-orange);
}

.lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  color: var(--c-ink);
}

a {
  color: var(--c-link);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}
a:hover { color: var(--c-link-hover); }
a:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  background: var(--flex-blue-100);
  color: var(--flex-dark-blue);
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   UTILITY HELPERS
   ========================================================================== */
.container { max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--sp-5); }
.container-lg { max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--sp-5); }
.section { padding-block: var(--section-py); }

@media (max-width: 640px) {
  :root {
    --fs-h1: 1.875rem; /* 30px */
    --fs-h2: 1.5rem;   /* 24px */
    --section-py: 48px;
  }
}