/* Handmatig gesynchroniseerde subset van apps/web/src/styles/tokens.css.
   Zie apps/marketing/README.md voor hoe dit up-to-date te houden.
   De legacy alias-laag (--espresso-*, --ember-*, --copper-*, --paper-*,
   --taupe-* enz.) is bewust weggelaten — niets hier gebruikt die namen. */

/* ── Fonts ───────────────────────────────────────────────────────────────────
   Sora + IBM Plex Mono zelf gehost (woff2) — geen externe Google Fonts-
   dependency.                                                             */
@font-face { font-family: 'Sora'; font-weight: 100; font-display: swap;
  src: url('/fonts/Sora-Thin.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 200; font-display: swap;
  src: url('/fonts/Sora-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 300; font-display: swap;
  src: url('/fonts/Sora-Light.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 400; font-display: swap;
  src: url('/fonts/Sora-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 500; font-display: swap;
  src: url('/fonts/Sora-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 600; font-display: swap;
  src: url('/fonts/Sora-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 700; font-display: swap;
  src: url('/fonts/Sora-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 800; font-display: swap;
  src: url('/fonts/Sora-ExtraBold.woff2') format('woff2'); }

@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap;
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap;
  src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2'); }

:root {
  /* ── Crisp-2 merkbasis (vast) ───────────────────────────────────────────── */
  --crisp-ink:      #1E1E1E;
  --crisp-offwhite: #F4F4F0;
  --crisp-yellow:   #FED405;

  /* ── Neutrale reeks (afgeleid van ink, warmgrijs) ───────────────────────── */
  --grey-50:  #F4F4F0;
  --grey-100: #E9E8E3;
  --grey-200: #DAD9D3;
  --grey-300: #C2C1BA;
  --grey-400: #9F9E96;
  --grey-500: #7C7B74;
  --grey-600: #5C5B55;
  --grey-700: #43423D;
  --grey-800: #2C2C29;
  --grey-900: #1E1E1E;

  /* ── Accentreeks (geel, spaarzaam gebruikt) ─────────────────────────────── */
  --yellow-500: #FED405;
  --yellow-600: #E5BE00;
  --yellow-700: #C7A400;
  --yellow-100: #FFF6C2;

  /* ── Semantisch ──────────────────────────────────────────────────────────── */
  --green-500:  #1E8E5A;
  --green-100:  #DFF3E8;
  --red-500:    #D64545;
  --red-100:    #FBE2E2;
  --orange-500: #E08A2E;
  --orange-100: #FBEAD5;
  --blue-500:   #3B6FE0;
  --blue-100:   #E2E9FB;

  /* ── Semantische rol-aliassen — licht thema (default) ───────────────────── */
  --bg:               var(--crisp-offwhite);
  --surface:          #FFFFFF;
  --surface-sunken:   var(--grey-100);
  --surface-hover:    var(--grey-100);
  --surface-pressed:  var(--grey-200);

  --ink:              var(--crisp-ink);
  --ink-secondary:    var(--grey-600);
  --ink-muted:        var(--grey-400);
  --ink-on-accent:    var(--crisp-ink);
  --ink-on-dark:      var(--crisp-offwhite);

  --border:           var(--grey-200);
  --border-strong:    var(--grey-300);

  --accent:           var(--crisp-yellow);
  --accent-hover:     var(--yellow-600);
  --accent-wash:      var(--yellow-100);

  --success:          var(--green-500);
  --success-wash:     var(--green-100);
  --warning:          var(--orange-500);
  --warning-wash:     var(--orange-100);
  --error:            var(--red-500);
  --error-wash:       var(--red-100);
  --info:             var(--blue-500);
  --info-wash:        var(--blue-100);

  --focus-ring:       var(--crisp-ink);
  --shadow-color:     rgba(30, 30, 29, 0.10);

  /* ── Typografie ──────────────────────────────────────────────────────────── */
  --font-ui:      'Sora', 'Sora Fallback', system-ui, sans-serif;
  --font-display: 'Sora', 'Sora Fallback', system-ui, sans-serif;
  --font-body:    'Sora', 'Sora Fallback', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 15px;
  --text-md:  17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px;
  --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 64px;

  --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6;
  --fw-thin: 100; --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
  --ls-display: 0.01em; --ls-wordmark: 0.08em; --ls-tight: -0.01em;
  --ls-normal: 0; --ls-caps: 0.06em;

  /* ── Spacing / radius / elevatie (crisp-2 schaal) ───────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px;

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 2px 8px var(--shadow-color);
  --shadow-lg: 0 8px 24px var(--shadow-color);

  --border-width:       1px;
  --border-width-thick: 1.5px;

  --content-max:   1120px;

  /* ── Domein-kleuren (Werk / Eigen bedrijf / Privé) ──────────────────────── */
  --werk:         #4A7398;
  --werk-soft:    rgba(74, 115, 152, 0.12);
  --bedrijf:      #C24E1A;
  --bedrijf-soft: rgba(194, 78, 26, 0.12);
  --prive:        #5F7F45;
  --prive-soft:   rgba(95, 127, 69, 0.12);

  /* ── Motion ──────────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast:   120ms;
  --duration-base:   180ms;
  --duration-slow:   280ms;
}

/* =========================================================================
   Dark theme — hier alleen gebruikt om de AI-sectie donker te maken
   (die zet zelf data-theme="dark" op zijn <section>), geen globale toggle.
   ========================================================================= */
[data-theme="dark"] {
  --bg:              #161615;
  --surface:         #201F1D;
  --surface-sunken:  #161615;
  --surface-hover:   #2A2926;
  --surface-pressed: #332F2A;

  --ink:           var(--crisp-offwhite);
  --ink-secondary: var(--grey-300);
  --ink-muted:     var(--grey-500);
  --ink-on-accent: var(--crisp-ink);
  --ink-on-dark:   var(--crisp-offwhite);

  --border:        #38362F;
  --border-strong: #4A473E;

  --accent:       var(--crisp-yellow);
  --accent-hover: #FFE24D;
  --accent-wash:  rgba(254, 212, 5, 0.14);

  --focus-ring:   var(--crisp-yellow);
  --shadow-color: rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }