/* Stevens Media & Marketing — Design System
   Tokens + base + component classes. Drop-in voor elk project (Tailwind/React/Vue/plain HTML).
   Fonts: plaats DMSans-Variable.ttf en DMSans-Italic-Variable.ttf in ./fonts/ */



@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Variable.ttf') format('truetype');
  font-weight: 100 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Italic-Variable.ttf') format('truetype');
  font-weight: 100 1000; font-style: italic; font-display: swap;
}

:root {
  /* ---- Kleuren: basispalet ---- */
  --navy-900: #111A2A;
  --navy-800: #1A2436;
  --navy-700: #27334A;
  --black: #000000;
  --white: #FFFFFF;
  --cyan-400: #23CFFE;
  --cyan-300: #4FD9FF;
  --periwinkle-200: #C5D6F1;
  --periwinkle-300: #B4C9EC;
  --gray-50: #F4F4F5;
  --gray-100: #E9EDF2;
  --gray-300: #C9CED6;
  --gray-500: #8A919C;
  --gray-600: #6B7280;
  --slate-400: #7C8698;
  --stone-400: #A8A29E;

  /* ---- Kleuren: semantisch ---- */
  --surface-page: var(--gray-50);
  --surface-card: var(--white);
  --surface-paper: var(--gray-100);
  --surface-tint: var(--periwinkle-200);
  --surface-dark: var(--navy-900);
  --surface-dark-raised: var(--navy-800);
  --accent: var(--cyan-400);
  --accent-hover: var(--cyan-300);
  --text-heading: var(--navy-900);
  --text-body: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--slate-400);
  --text-on-accent: var(--navy-900);
  --text-eyebrow: var(--stone-400);
  --border-light: var(--gray-300);
  --border-dark: var(--navy-700);
  --border-input-dark: #333F55;
  --link: var(--cyan-400);
  --link-on-light: #0FA8D6;

  /* ---- Typografie ---- */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-serif-eyebrow: 'DM Serif Text', Georgia, serif;
  --text-hero: 44px;
  --text-h2: 40px;
  --text-h3: 24px;
  --text-lg: 19px;
  --text-body-size: 17px;
  --text-sm: 15px;
  --text-xs: 13px;
  --text-eyebrow-size: 17px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.15;
  --leading-heading: 1.25;
  --leading-body: 1.55;
  --tracking-kicker: 0.08em;

  /* ---- Spacing & layout ---- */
  --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-section: 128px;
  --container-max: 1296px;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Schaduwen ---- */
  --shadow-card: 0 2px 8px rgba(17, 26, 42, 0.06);
  --shadow-paper: 0 24px 48px -12px rgba(17, 26, 42, 0.18), 0 4px 12px rgba(17, 26, 42, 0.06);
  --shadow-chip: 0 8px 16px -4px rgba(17, 26, 42, 0.15);

  /* ---- Overlays ---- */
  --overlay-photo: linear-gradient(180deg, rgba(17,26,42,0.55) 0%, rgba(17,26,42,0.15) 40%, rgba(17,26,42,0.45) 100%);
  --overlay-hero: rgba(17, 26, 42, 0.78);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-med: 300ms;
}

/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  background: var(--surface-page);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link-on-light); text-decoration: none; transition: opacity var(--duration-fast) var(--ease-out); }
a:hover { opacity: 0.75; }
img { max-width: 100%; display: block; }

/* ================= Layout ================= */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: var(--space-section); }
.dark-block {
  background: var(--surface-dark);
  color: var(--text-on-dark-muted);
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-8);
}
.dark-block h1, .dark-block h2, .dark-block h3 { color: var(--text-on-dark); }

/* ================= Typografie helpers ================= */
.kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow {
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-serif-eyebrow);
  font-style: italic;
  font-size: var(--text-eyebrow-size);
  color: var(--text-eyebrow);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 48px; height: 1px; background: var(--border-light); opacity: .8; }
.eyebrow--center { justify-content: center; }
.on-dark .eyebrow::before, .on-dark .eyebrow::after, .dark-block .eyebrow::before, .dark-block .eyebrow::after { background: var(--border-dark); }
.section-heading { text-align: center; }
.section-heading .eyebrow { justify-content: center; margin-bottom: 20px; }
.section-heading p { max-width: 760px; margin: 20px auto 0; }
.section-heading--left { text-align: left; }
.section-heading--left .eyebrow { justify-content: flex-start; }
.section-heading--left p { margin-inline: 0; }
.text-dim { color: rgba(255,255,255,0.35); } /* hero two-tone: laatste regels */

/* ================= Buttons ================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 15px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.btn:hover { opacity: 1; }
.btn--primary { background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-md); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary::after {
  content: ""; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8h10.5M9.5 4.5 13 8l-3.5 3.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8h10.5M9.5 4.5 13 8l-3.5 3.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn--no-arrow::after { display: none; }
.btn--secondary { background: var(--surface-card); color: var(--text-heading); border-color: var(--border-light); border-radius: var(--radius-sm); }
.btn--secondary:hover { opacity: .75; }
.btn--sm { font-size: var(--text-xs); padding: 10px 16px; }

/* ================= Tags & chips ================= */
.tag {
  display: inline-flex; align-items: center;
  font-size: var(--text-xs); line-height: 1;
  color: var(--text-muted);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.label-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface-card);
  border-radius: var(--radius-pill);
  padding: 8px 18px 8px 8px;
  box-shadow: var(--shadow-chip);
  font-size: var(--text-sm);
  color: var(--text-heading);
  transform: rotate(var(--tilt, 0deg));
}
.label-chip__icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip-color, var(--accent)); color: #fff; font-size: 13px;
}

/* ================= Cards ================= */
.card { background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; }

.paper-card {
  background: linear-gradient(160deg, #F0F3F7 0%, var(--surface-paper) 100%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-paper);
  padding: var(--space-6);
  transform: rotate(var(--tilt, 0deg)); /* gebruik ±3–8deg */
}
.paper-card--periwinkle { background: linear-gradient(160deg, var(--surface-tint) 0%, var(--periwinkle-300) 100%); }

.service-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 312 / 428;
  color: var(--text-on-dark);
}
.service-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-med) var(--ease-out); }
.service-card:hover > img { transform: scale(1.04); }
.service-card::before { content: ""; position: absolute; inset: 0; background: var(--overlay-photo); z-index: 1; }
.service-card__head { position: absolute; z-index: 2; top: 20px; left: 22px; right: 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.service-card__title { font-size: 22px; font-weight: var(--weight-medium); }
.service-card__count { font-size: var(--text-xs); color: rgba(255,255,255,.8); }
.service-card__glyph {
  position: absolute; z-index: 2; left: 22px; bottom: 20px; width: 28px; height: 28px;
  background-image: radial-gradient(circle, rgba(255,255,255,.95) 1.6px, transparent 1.8px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(45deg, transparent 30%, #000 30%);
          mask-image: linear-gradient(45deg, transparent 30%, #000 30%);
}

/* ================= Forms (donker oppervlak) ================= */
.field-label { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-on-dark); }
.input, .textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  background: transparent;
  color: var(--text-on-dark);
  border: 1px solid var(--border-input-dark);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-on-dark-muted); }
.input:focus, .textarea:focus { border-color: var(--accent); }
.textarea { min-height: 160px; resize: vertical; }
.check-circle { appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-input-dark); background: transparent; cursor: pointer; display: inline-grid; place-content: center; margin: 0; }
.check-circle:checked { background: var(--accent); border-color: var(--accent); }
.check-circle:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--navy-900); }

@media (max-width: 768px) {
  :root { --text-hero: 34px; --text-h2: 30px; --text-h3: 21px; --space-section: 80px; }
  .dark-block { padding: var(--space-7) var(--space-5); }
}