/* =============================================================================
   DC Klinieken — Design Tokens
   Based on the official "Visuele identiteit" pages of the DC Klinieken brand
   guide (March 2026 / "nieuwe website" deck).

   Brand promise:  "Goede zorg, nu."
   Personality:    Warm · human · friendly · premium · approachable
   Kernwaarden:    Aandacht · Snelheid · Daadkracht · Eenvoud
   ============================================================================= */

/* Axiforma is the OFFICIAL brand font. We don't license it here; we ship a
   visually-close Google Fonts substitution (Mulish) plus a font-face alias
   so consumers can drop Axiforma WOFF2 files into ./fonts/ and have every
   token pick them up automatically. */

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700;1,800;1,900&family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Axiforma';
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  src: local('Axiforma'),
       local('Axiforma-Medium'),
       url('./fonts/Axiforma-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Axiforma';
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  src: local('Axiforma Bold'),
       local('Axiforma-Bold'),
       url('./fonts/Axiforma-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Axiforma';
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  src: local('Axiforma Black'),
       local('Axiforma-Black'),
       url('./fonts/Axiforma-Black.woff2') format('woff2');
}
@font-face {
  font-family: 'Axiforma';
  font-weight: 600 900;
  font-style: italic;
  font-display: swap;
  src: local('Axiforma Bold Italic'),
       local('Axiforma-BoldItalic'),
       url('./fonts/Axiforma-BoldItalic.woff2') format('woff2');
}

:root {
  /* ============================================================ HOOFDKLEUREN
     Official brand "Hoofdkleuren" from the brand guide.
     ============================================================ */

  --dc-blue-dark:   #053787; /* DEEP BLUE  — institutional voice, headings, logo */
  --dc-blue-light:  #B5D0FF; /* LIGHT BLUE — soft surfaces, gradient endpoints */
  --dc-coral:       #F3764A; /* CORAL      — primary accent, CTAs, highlights */
  --dc-sand:        #EAC479; /* SAND/YELLOW — warm secondary, illustration fills */
  --dc-cream:       #F5EBE1; /* CREAM      — DEFAULT PAGE BACKGROUND */

  /* ============================================================ SUBKLEUREN
     "Terughoudend gebruiken" — use sparingly. Mauve appears in the
     5V hand, accent type, soft gradient endpoints.
     ============================================================ */

  --dc-mauve:       #B284B2; /* LAVENDER MAUVE — soft accent, paired with blue */
  --dc-mauve-light: #D4BBD4; /* derived — lighter mauve for gradient endpoints */

  /* ============================================================ DERIVED RAMPS
     Programmatic ramps derived from hoofdkleuren for UI states.
     Computed via OKLCH; values rounded.
     ============================================================ */

  /* Blue ramp — anchored at dc-blue-dark (#053787) and dc-blue-light (#B5D0FF) */
  --dc-blue-50:   #EEF3FC;
  --dc-blue-100:  #DDE9FA;
  --dc-blue-200:  #B5D0FF; /* hoofdkleur */
  --dc-blue-300:  #7FA6E6;
  --dc-blue-400:  #4E7CC7;
  --dc-blue-500:  #2A5BAA;
  --dc-blue-600:  #154693;
  --dc-blue-700:  #053787; /* hoofdkleur — PRIMARY */
  --dc-blue-800:  #042961;
  --dc-blue-900:  #021A40;

  /* Coral ramp — anchored at dc-coral (#F3764A) */
  --dc-coral-50:   #FEF1EB;
  --dc-coral-100:  #FCDCCB;
  --dc-coral-200:  #F9B697;
  --dc-coral-300:  #F69673;
  --dc-coral-400:  #F3764A; /* hoofdkleur */
  --dc-coral-500:  #DB5C30;
  --dc-coral-600:  #B14823;
  --dc-coral-700:  #7E331A;

  /* Sand ramp — anchored at dc-sand (#EAC479) */
  --dc-sand-50:    #FBF5E8;
  --dc-sand-100:   #F5E5C3;
  --dc-sand-200:   #EFD49E;
  --dc-sand-300:   #EAC479; /* hoofdkleur */
  --dc-sand-400:   #D5AD5C;
  --dc-sand-500:   #B58E40;

  /* Mauve ramp — anchored at dc-mauve (#B284B2) */
  --dc-mauve-50:   #F5EDF5;
  --dc-mauve-100:  #E4D2E4;
  --dc-mauve-200:  #D4BBD4;
  --dc-mauve-300:  #B284B2; /* subkleur */
  --dc-mauve-400:  #97679A;
  --dc-mauve-500:  #774C7A;

  /* Cream / paper neutrals */
  --dc-cream-light: #FBF6EE; /* a touch lighter than dc-cream */
  --dc-cream-dark:  #EDE0CF; /* darker rim for cream sections */
  --dc-white:       #FFFFFF;

  /* Ink (cool warm-leaning near-black; never pure black) */
  --dc-ink:      #021A40; /* uses dc-blue-900 for headlines */
  --dc-ink-90:   #0D2552;
  --dc-ink-80:   #1E325F;
  --dc-ink-70:   #3A4E78;
  --dc-ink-60:   #586B91;
  --dc-ink-50:   #7888AA;
  --dc-ink-40:   #9DABC4;
  --dc-ink-30:   #BBC5D6;
  --dc-ink-20:   #D7DCE6;
  --dc-ink-12:   #E5E8EF; /* default border on cream */
  --dc-ink-08:   #EDEFF4;
  --dc-ink-04:   #F4F5F8;

  /* ============================================================ SEMANTIC */

  --dc-success:  #2E8B57;
  --dc-warning:  #C58B2E;
  --dc-error:    #C0392B;
  --dc-info:     var(--dc-blue-700);

  /* ============================================================ ROLE TOKENS
     Always prefer these in product code; they remap if the brand evolves.
     ============================================================ */

  --bg-page:     var(--dc-cream);    /* DEFAULT page background */
  --bg-surface:  var(--dc-white);    /* elevated cards */
  --bg-sunken:   var(--dc-cream-dark);
  --bg-tint:     var(--dc-blue-50);  /* very subtle blue for soft hero sections */

  --fg-strong:   var(--dc-blue-900); /* near-black w/ blue cast */
  --fg-default:  var(--dc-blue-800);
  --fg-muted:    var(--dc-ink-70);
  --fg-faint:    var(--dc-ink-50);
  --fg-on-blue:  var(--dc-white);
  --fg-link:     var(--dc-blue-700);

  --border-soft:   var(--dc-ink-12);
  --border-strong: var(--dc-ink-30);

  --brand:       var(--dc-blue-700);
  --brand-fg:    var(--dc-white);
  --accent:      var(--dc-coral-400);

  /* ============================================================ GRADIENTS
     Per brand guide: "Het verloop wordt diagonaal toegepast (van links naar
     rechts)." All gradient angles are 110° (≈ left → right with a slight
     downward tilt) to match the brand book examples.
     ============================================================ */

  --grad-blue-deep:   linear-gradient(110deg, var(--dc-blue-dark) 0%, var(--dc-blue-light) 100%);
  --grad-blue-soft:   linear-gradient(110deg, var(--dc-blue-light) 0%, var(--dc-cream) 100%);
  --grad-mauve:       linear-gradient(110deg, var(--dc-mauve) 0%, var(--dc-mauve-light) 100%);
  --grad-mauve-coral: linear-gradient(110deg, var(--dc-mauve) 0%, #F2D9D2 100%);
  --grad-sand:        linear-gradient(110deg, var(--dc-sand) 0%, var(--dc-cream) 100%);
  --grad-blue-mauve:  linear-gradient(110deg, var(--dc-blue-dark) 0%, var(--dc-mauve) 100%);

  /* ============================================================ TYPE */

  --font-display: 'Axiforma', 'Mulish', system-ui, -apple-system, sans-serif;
  --font-sans:    'Axiforma', 'Mulish', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Axiforma weights used in the brand: 500 Medium, 700 Bold, 900 Black.
     Italic only at Bold/Black weights (per logo & brand examples). */

  /* Type scale (px). Brand favours large headlines + comfortable body. */
  --fs-eyebrow:  12px;
  --fs-caption:  13px;
  --fs-body:     16px;
  --fs-lead:     19px;
  --fs-h6:       18px;
  --fs-h5:       22px;
  --fs-h4:       28px;
  --fs-h3:       36px;
  --fs-h2:       48px;
  --fs-h1:       64px;
  --fs-display:  96px;

  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-base:     1.55;
  --lh-relaxed:  1.7;

  --tracking-eyebrow: 0.10em;
  --tracking-display: -0.02em;
  --tracking-h1:      -0.015em;
  --tracking-h2:      -0.012em;
  --tracking-tight:   -0.005em;
  --tracking-base:    0em;

  /* ============================================================ SPACE
     4px baseline. Layout grid: 12-col @ 1280px max, 24px gutters,
     80px lateral page margin on marketing pages.
  */

  --sp-0:  0px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ============================================================ RADII
     The "D-shape pebble" is the signature brand device. Most surfaces use
     either a fully-pill radius on one side, or a generous 24-32px rounded
     corner. Sharper corners only on data tables / inputs.
  */

  --r-xs:    4px;
  --r-sm:    8px;   /* inputs, badges */
  --r-md:   16px;   /* small cards */
  --r-lg:   24px;   /* default card */
  --r-xl:   40px;   /* hero panel */
  --r-pill: 9999px; /* used for the D-shape and pill buttons */

  /* ============================================================ ELEVATION
     Subtle, blue-tinted shadows. Brand is print-rooted; shadows are quiet.
  */

  --shadow-1: 0 1px 2px rgba(2, 26, 64, 0.06), 0 1px 1px rgba(2, 26, 64, 0.04);
  --shadow-2: 0 6px 18px rgba(2, 26, 64, 0.08), 0 1px 2px rgba(2, 26, 64, 0.05);
  --shadow-3: 0 18px 48px rgba(2, 26, 64, 0.12), 0 2px 6px rgba(2, 26, 64, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--border-soft);

  /* ============================================================ MOTION */

  --ease-out:     cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.6, 1);
  --dur-micro:    180ms;
  --dur-page:     280ms;
  --dur-hero:     400ms;

  /* ============================================================ Z */

  --z-base:    0;
  --z-sticky: 50;
  --z-modal:  90;
  --z-toast: 100;
}

/* =============================================================================
   Semantic typography utility classes
   Headlines mix Axiforma Black + an italic accent word in Axiforma Bold Italic
   to echo the "DC *Klinieken*" logo wordmark.
   ============================================================================= */

.dc-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dc-mauve-400);
  line-height: var(--lh-snug);
}

.dc-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-strong);
}

.dc-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-h1);
  color: var(--fg-strong);
}

.dc-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h2);
  color: var(--fg-strong);
}

.dc-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

.dc-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.dc-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.dc-h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.dc-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
}

.dc-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--fg-default);
}

.dc-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: var(--lh-base);
  color: var(--fg-muted);
}

.dc-mono {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fg-default);
}

/* The "italic accent word" pattern from the logo + brand examples — i.e.
   "Weer **focus** op je vak?" or "DC *Klinieken*". */
.dc-accent {
  font-style: italic;
  font-weight: 700;
  color: var(--dc-blue-700);
}

/* =============================================================================
   Resets / base
   ============================================================================= */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--dc-blue-200);
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
a:hover {
  color: var(--dc-blue-800);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--dc-blue-700);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* =============================================================================
   The "D-shape pebble" — DC Klinieken's signature container shape.
   Flat left, fully-rounded right edge. Always uses one of the brand gradients.
   Override .dc-pebble--reverse for flat-right, rounded-left.
   ============================================================================= */

.dc-pebble {
  border-radius: var(--r-pill);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--grad-blue-deep);
  color: var(--dc-white);
  padding: var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-8);
  position: relative;
}
.dc-pebble--reverse {
  border-radius: var(--r-pill);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: var(--sp-12);
  padding-right: var(--sp-8);
}
.dc-pebble--mauve   { background: var(--grad-mauve-coral); }
.dc-pebble--soft    { background: var(--grad-blue-soft); color: var(--fg-strong); }
.dc-pebble--sand    { background: var(--grad-sand); color: var(--fg-strong); }
.dc-pebble--solid-blue   { background: var(--dc-blue-700); }
.dc-pebble--solid-mauve  { background: var(--dc-mauve-300); }