/* ==========================================================================
   Zeker Spreken — design tokens
   --------------------------------------------------------------------------
   Overgenomen uit het Claude Design-project "Zeker Spreken Design System"
   (tokens/colors.css, typography.css, spacing.css, radius.css, elevation.css,
   motion.css). Dit bestand bevat UITSLUITEND custom properties — geen
   elementselectors. Alles wat een element rechtstreeks stijlt hoort in
   theme.json (front-end én editor) of in brand.css.

   Verhouding tot theme.json:
     theme.json  = de editor-facing subset (palet, lettergroottes, ruimte,
                   schaduw) die Lola in de blokeditor te zien krijgt.
     tokens.css  = de volledige ontwikkelaarsset, inclusief de complete
                   kleurschalen en tokens die theme.json niet kan uitdrukken
                   (radius, motion, typerollen, measure).
   Wijzigt er een merkkleur, pas dan BEIDE aan. Zie README.md.
   ========================================================================== */

:root {
  /* ── Merkkleuren ────────────────────────────────────────────────────────
     Door de klant vastgelegd. Achtergrond #fffdf8, primair #450804,
     secundair #a85124. Bordeaux #670003 komt uit de logobestanden.
     Blauw #16304d is door de klant aangeleverd. */
  --brand-cream: #fffdf8;
  --brand-primary: #450804;
  --brand-bordeaux: #670003;
  --brand-orange: #a85124;
  --brand-blue: #16304d;

  /* Wijnschaal (primair → bordeaux) */
  --wine-900: #2c0503;
  --wine-800: #450804;
  --wine-700: #670003;
  --wine-600: #7b1a10;
  --wine-500: #93372c;
  --wine-400: #b1685c;
  --wine-300: #cfa39b;
  --wine-200: #e6ccc7;
  --wine-100: #f4e5e1;

  /* Oranjeschaal — vormen, accenten, iconvullingen. Niet voor lange tekst. */
  --orange-700: #8a3f1a;
  --orange-600: #a85124;
  --orange-500: #c06c3c;
  --orange-400: #d99669;
  --orange-300: #ecc4a9;
  --orange-200: #f5dfd0;
  --orange-100: #fbf0e7;

  /* Blauwschaal */
  --blue-900: #0c1c2e;
  --blue-800: #16304d;
  --blue-700: #28486b;
  --blue-600: #3d6389;
  --blue-500: #5d82a5;
  --blue-400: #8ba6c1;
  --blue-300: #b6c9dc;
  --blue-200: #dbe5ee;
  --blue-100: #eef3f8;

  /* Warme neutralen — nooit koel grijs */
  --cream-50: #fffdf8;
  --sand-100: #f8f2e8;
  --sand-200: #efe7da;
  --sand-300: #ded3c2;
  --stone-400: #b8ac9c;
  --stone-500: #867b6d;
  --ink-700: #544b43;
  --ink-900: #2a2521;

  /* ── Semantische vlakken ── */
  --surface-page: var(--brand-cream);
  --surface-raised: #ffffff;
  --surface-sunken: var(--sand-100);
  --surface-card: #ffffff;
  --surface-card-quiet: var(--sand-100);
  --surface-inverse: var(--brand-primary);
  --surface-inverse-alt: var(--brand-bordeaux);
  --surface-accent-soft: var(--orange-100);
  --surface-accent-blue: var(--blue-200);

  /* ── Semantische tekst ── */
  --text-heading: var(--brand-primary);
  --text-body: var(--ink-900);
  --text-muted: var(--stone-500);
  --text-accent: var(--brand-bordeaux);
  --text-on-inverse: var(--brand-cream);
  --text-on-inverse-muted: rgba(255, 253, 248, 0.72);
  --text-link: var(--brand-bordeaux);
  --text-link-hover: var(--orange-600);

  /* ── Lijnen ── */
  --border-subtle: var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong: var(--brand-primary);
  --border-accent: var(--brand-orange);
  --border-on-inverse: rgba(255, 253, 248, 0.28);

  /* ── Interactie ── */
  --action-primary-bg: var(--brand-primary);
  --action-primary-bg-hover: var(--wine-900);
  --action-primary-bg-active: #1e0402;
  --action-primary-fg: var(--brand-cream);
  --action-secondary-bg: transparent;
  --action-secondary-fg: var(--brand-primary);
  --action-secondary-border: var(--brand-primary);
  --action-secondary-bg-hover: var(--wine-100);
  --action-accent-bg: var(--brand-orange);
  --action-accent-bg-hover: var(--orange-700);
  --action-accent-fg: var(--brand-cream);
  --action-quiet-fg: var(--ink-700);
  --action-quiet-bg-hover: var(--sand-200);
  --action-disabled-bg: var(--sand-200);
  --action-disabled-fg: var(--stone-400);
  --focus-ring: var(--brand-orange);

  /* ── Status ── */
  --status-info-bg: var(--blue-200);
  --status-info-fg: var(--blue-800);
  --status-info-line: var(--blue-500);
  --status-positive-bg: #e8eee4;
  --status-positive-fg: #3f5237;
  --status-positive-line: #7d9370;
  --status-attention-bg: var(--orange-200);
  --status-attention-fg: var(--orange-700);
  --status-attention-line: var(--orange-500);
  --status-critical-bg: var(--wine-100);
  --status-critical-fg: var(--brand-bordeaux);
  --status-critical-line: var(--wine-500);

  /* ── Typografie ───────────────────────────────────────────────────────
     De families verwijzen naar de theme.json-presets zodat er één bron is;
     de fallback houdt dit bestand bruikbaar buiten WordPress. */
  --font-heading: var(--wp--preset--font-family--roboto, "Roboto", system-ui, sans-serif);
  --font-body: var(--wp--preset--font-family--open-sans, "Open Sans", system-ui, sans-serif);
  --font-accent: var(--wp--preset--font-family--baby-doll, "Baby Doll", "Open Sans", cursive);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Typeschaal — ratio 1.25 vanaf 17px body */
  --text-3xs: 12px;
  --text-2xs: 13px;
  --text-xs: 14px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-md: 19px;
  --text-lg: 22px;
  --text-xl: 27px;
  --text-2xl: 33px;
  --text-3xl: 41px;
  --text-4xl: 52px;
  --text-5xl: 64px;
  --text-6xl: 80px;

  --leading-tight: 1.05;
  --leading-snug: 1.18;
  --leading-heading: 1.14;
  --leading-normal: 1.45;
  --leading-body: 1.65;
  --leading-loose: 1.8;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.03em;
  --tracking-caps: 0.12em;

  /* Semantische typerollen */
  --type-hero: var(--weight-bold) var(--text-4xl) / var(--leading-heading) var(--font-heading);
  --type-h1: var(--weight-bold) var(--text-3xl) / var(--leading-heading) var(--font-heading);
  --type-h2: var(--weight-bold) var(--text-2xl) / var(--leading-heading) var(--font-heading);
  --type-h3: var(--weight-bold) var(--text-xl) / var(--leading-snug) var(--font-heading);
  --type-h4: var(--weight-bold) var(--text-lg) / var(--leading-snug) var(--font-heading);
  --type-lead: var(--weight-regular) var(--text-md) / var(--leading-loose) var(--font-body);
  --type-body: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font-body);
  --type-body-sm: var(--weight-regular) var(--text-sm) / var(--leading-body) var(--font-body);
  --type-label: var(--weight-semibold) var(--text-sm) / var(--leading-normal) var(--font-body);
  --type-eyebrow: var(--weight-bold) var(--text-2xs) / var(--leading-normal) var(--font-body);
  --type-button: var(--weight-bold) var(--text-sm) / 1 var(--font-body);
  /* Baby Doll: alleen korte accentregels, nooit alinea's */
  --type-accent-lg: var(--weight-regular) var(--text-2xl) / 1.25 var(--font-accent);
  --type-accent: var(--weight-regular) var(--text-lg) / 1.3 var(--font-accent);
  --type-accent-sm: var(--weight-regular) var(--text-md) / 1.3 var(--font-accent);

  /* ── Ruimte ── */
  --space-0: 0;
  --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;
  --space-32: 128px;
  --gutter-inline: 24px;
  --gutter-inline-lg: 48px;
  --section-y: 80px;
  --section-y-lg: 112px;
  --measure-narrow: 34ch;
  --measure-body: 62ch;
  --measure-wide: 78ch;
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* ── Radius ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-pill);
  --radius-input: var(--radius-md);
  --radius-image: var(--radius-xl);
  --border-width-hairline: 1px;
  --border-width-default: 1.5px;
  --border-width-strong: 2px;

  /* ── Elevatie — warm getint, nooit neutraal zwart ── */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(69, 8, 4, 0.06);
  --shadow-sm: 0 2px 6px rgba(69, 8, 4, 0.07);
  --shadow-md: 0 6px 18px rgba(69, 8, 4, 0.09);
  --shadow-lg: 0 14px 36px rgba(69, 8, 4, 0.12);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-subtle);
  --shadow-focus: 0 0 0 3px rgba(168, 81, 36, 0.4);
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --overlay-scrim: rgba(42, 37, 33, 0.45);
  --blur-glass: blur(10px);
  --surface-glass: rgba(255, 253, 248, 0.85);

  /* ── Motion ── */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 360ms;
  --duration-slower: 600ms;
  --ease-standard: cubic-bezier(0.32, 0.72, 0.32, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.9, 0.35);
  --transition-control:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  --transition-surface:
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  --press-scale: 0.985;

  /* ── Iconen ───────────────────────────────────────────────────────────
     Het ontwerp haalde Lucide van een CDN. Dat is hier bewust niet
     overgenomen: een extern script laden kost een verzoek naar een derde
     partij (AVG) en een afhankelijkheid die stuk kan. De paar iconen die
     het ontwerp echt gebruikt staan als masker in het thema zelf.
     Vorm volgt Lucide: 24px kader, ronde uiteinden, stroke 2. */
  --zs-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  :root {
    --gutter-inline: var(--gutter-inline-lg);
  }
}