/*
 * Michel Beyaert — Brand Tokens v1
 * Canonical origin: https://michelbeyaert.eu/brand/v1/tokens.css
 *
 * Gebruik: <link rel="stylesheet" href="https://michelbeyaert.eu/brand/v1/tokens.css">
 * Verwijder daarna alle lokale :root-kopieën en Google Fonts <link>-tags.
 *
 * Fonts: Geist (sans) + Fraunces (serif/display) — self-hosted, geen Google CDN.
 * Tokens: behoud van bestaande naamgeving (--bg, --ink, --accent, …).
 * Dark mode: beide mechanismen actief — @media EN [data-theme="dark"].
 */

/* ── @font-face — Geist (variabele font, dekt wght 100–900) ─────────────────── */
@font-face {
  font-family: 'Geist';
  src: url('fonts/geist/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── @font-face — Fraunces (4 sneden die de sites gebruiken) ────────────────── */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces/fraunces-latin-300-normal.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces/fraunces-latin-300-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces/fraunces-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces/fraunces-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ── Design Tokens ───────────────────────────────────────────────────────────── */
:root {

  /* Fonts */
  --font:       'Geist', system-ui, -apple-system, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;

  /* Brand */
  --ink:          #1A2035;
  --accent:       #1A9E6E;
  --bg:           #F2F4F7;
  --surface:      #FFFFFF;
  --surface-raise: #F7F9FC;
  --ink-muted:    #6B7591;
  --ink-faint:    #B0B8CC;

  /* Accent states */
  --accent-hover:  #168A60;
  --accent-active: #12724F;
  --accent-dim:    rgba(26, 158, 110, 0.07);
  --accent-mid:    rgba(26, 158, 110, 0.14);

  /* Neutrals */
  --neutral-50:  #F7F9FC;
  --neutral-100: #F2F4F7;
  --neutral-200: #DDE2EC;
  --neutral-300: #C9D0DF;
  --neutral-400: #B0B8CC;
  --neutral-500: #8891AA;
  --neutral-600: #6B7591;
  --neutral-700: #363C50;
  --neutral-800: #252A38;
  --neutral-900: #1A2035;

  /* Borders */
  --border:       rgba(30, 40, 60, 0.09);
  --border-solid: #DDE2EC;

  /* Status — site-states (Live / Beta / In ontwikkeling) */
  --status-live:    #1A9E6E;  /* = --accent */
  --status-live-bg: rgba(26, 158, 110, 0.12);
  --status-beta:    #A06B10;
  --status-beta-bg: rgba(180, 130, 20, 0.12);
  --status-dev:     #5A6275;
  --status-dev-bg:  rgba(100, 110, 130, 0.12);

  /* Status — data/feedback (success / error / warning / info) */
  --success:     #15803D;
  --success-bg:  rgba(21, 128, 61, 0.10);
  --error:       #DC2626;
  --error-bg:    rgba(220, 38, 38, 0.10);
  --warning:     #D97706;
  --warning-bg:  rgba(217, 119, 6, 0.12);
  --info:        #2563EB;
  --info-bg:     rgba(37, 99, 235, 0.10);

  /* Typography scale */
  --text-display:  4rem;
  --text-h1:       3rem;
  --text-h2:       2.25rem;
  --text-h3:       1.75rem;
  --text-h4:       1.375rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-body-sm:  0.875rem;
  --text-caption:  0.75rem;
  --text-eyebrow:  0.75rem;

  --leading-display:  1;
  --leading-h1:       1.05;
  --leading-h2:       1.1;
  --leading-h3:       1.2;
  --leading-h4:       1.3;
  --leading-body-lg:  1.65;
  --leading-body:     1.6;
  --leading-body-sm:  1.55;
  --leading-caption:  1.45;
  --leading-eyebrow:  1.2;

  --tracking-display: -0.04em;
  --tracking-h1:      -0.035em;
  --tracking-h2:      -0.03em;
  --tracking-h3:      -0.025em;
  --tracking-h4:      -0.015em;
  --tracking-body:     0em;
  --tracking-caption:  0.02em;
  --tracking-eyebrow:  0.14em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Spacing */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --r:          14px;  /* card radius — alias voor --radius-lg */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(26, 32, 53, 0.06);
  --shadow-md:    0 8px 24px rgba(26, 32, 53, 0.08);
  --shadow-lg:    0 18px 48px rgba(26, 32, 53, 0.12);
  --shadow-focus: 0 0 0 4px rgba(26, 158, 110, 0.18);

  /* Ease curves */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Component tokens */
  --nav-h:           60px;
  --control-height:  44px;
  --control-padding-x: 18px;
  --control-radius:  var(--radius-md);
}

/* ── Dark mode — @media (system voorkeur) ────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #111318;
    --surface:      #191C24;
    --surface-raise: #1E2230;
    --border:       rgba(255, 255, 255, 0.07);
    --border-solid: #252A38;
    --ink:          #E8EDF8;
    --ink-muted:    #8891AA;
    --ink-faint:    #363C50;
    --accent:       #22C98B;
    --accent-hover:  #39D99D;
    --accent-active: #18AF78;
    --accent-dim:   rgba(34, 201, 139, 0.08);
    --accent-mid:   rgba(34, 201, 139, 0.16);

    --neutral-50:  #1E2230;
    --neutral-100: #191C24;
    --neutral-200: #252A38;
    --neutral-300: #363C50;
    --neutral-400: #59637E;
    --neutral-500: #8891AA;
    --neutral-600: #A8B1C7;
    --neutral-700: #C9D0DF;
    --neutral-800: #DDE2EC;
    --neutral-900: #E8EDF8;

    --status-live:    #22C98B;
    --status-live-bg: rgba(34, 201, 139, 0.15);
    --status-beta:    #F59E0B;
    --status-beta-bg: rgba(245, 158, 11, 0.15);
    --status-dev:     #94A3B8;
    --status-dev-bg:  rgba(148, 163, 184, 0.15);

    --success:    #4ADE80;
    --success-bg: rgba(74, 222, 128, 0.13);
    --error:      #F87171;
    --error-bg:   rgba(248, 113, 113, 0.14);
    --warning:    #FBBF24;
    --warning-bg: rgba(251, 191, 36, 0.14);
    --info:       #60A5FA;
    --info-bg:    rgba(96, 165, 250, 0.14);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.30);
    --shadow-lg:    0 18px 48px rgba(0, 0, 0, 0.38);
    --shadow-focus: 0 0 0 4px rgba(34, 201, 139, 0.22);
  }
}

/* ── Dark mode — [data-theme="dark"] (expliciete toggle) ────────────────────── */
[data-theme="dark"] {
  --bg:           #111318;
  --surface:      #191C24;
  --surface-raise: #1E2230;
  --border:       rgba(255, 255, 255, 0.07);
  --border-solid: #252A38;
  --ink:          #E8EDF8;
  --ink-muted:    #8891AA;
  --ink-faint:    #363C50;
  --accent:       #22C98B;
  --accent-hover:  #39D99D;
  --accent-active: #18AF78;
  --accent-dim:   rgba(34, 201, 139, 0.08);
  --accent-mid:   rgba(34, 201, 139, 0.16);

  --neutral-50:  #1E2230;
  --neutral-100: #191C24;
  --neutral-200: #252A38;
  --neutral-300: #363C50;
  --neutral-400: #59637E;
  --neutral-500: #8891AA;
  --neutral-600: #A8B1C7;
  --neutral-700: #C9D0DF;
  --neutral-800: #DDE2EC;
  --neutral-900: #E8EDF8;

  --status-live:    #22C98B;
  --status-live-bg: rgba(34, 201, 139, 0.15);
  --status-beta:    #F59E0B;
  --status-beta-bg: rgba(245, 158, 11, 0.15);
  --status-dev:     #94A3B8;
  --status-dev-bg:  rgba(148, 163, 184, 0.15);

  --success:    #4ADE80;
  --success-bg: rgba(74, 222, 128, 0.13);
  --error:      #F87171;
  --error-bg:   rgba(248, 113, 113, 0.14);
  --warning:    #FBBF24;
  --warning-bg: rgba(251, 191, 36, 0.14);
  --info:       #60A5FA;
  --info-bg:    rgba(96, 165, 250, 0.14);

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-lg:    0 18px 48px rgba(0, 0, 0, 0.38);
  --shadow-focus: 0 0 0 4px rgba(34, 201, 139, 0.22);
}