/* Design tokens — publieke site
 *
 * Bron: docs/DESIGN.md. Nergens anders mogen hardcoded kleur-, spacing-
 * of typografie-waarden voorkomen — alles via deze custom properties.
 *
 * Dark-mode overrides staan in themes/dark.css (M7), getoetst op
 * WCAG AA-contrast.
 */

:root {
  /* === Kleuren — light mode (DESIGN.md §1) ============================ */

  /* Primair + accent */
  --color-primary: #28261d;
  --color-accent: #0b008c;

  /* Surface-laagjes */
  --color-surface: #fbf9f4;
  --color-surface-lowest: #ffffff;
  --color-surface-low: #f5f3ee;
  --color-surface-container: #f0eee9;
  --color-surface-high: #eae8e3;

  /* Tekst */
  --color-text: #1b1c19;
  --color-text-muted: #49473f;

  /* Outline / borders */
  --color-border: #cac6bc;
  --color-outline: #726f63;

  /* Secondary (zachte salie-groen — sprekers, live-label) */
  --color-secondary: #506356;
  --color-secondary-container: #d3e8d7;
  --color-on-secondary-container: #56695c;

  /* Tertiary (lavendel — conference-badge) */
  --color-tertiary-fixed: #e1e0ff;
  --color-on-tertiary-fixed-variant: #2f2ebe;

  /* Primary-fixed (zand — seminar-badge) */
  --color-primary-fixed: #e7e2d4;
  --color-on-primary-fixed: #1d1c13;

  /* Error */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Urgent — "Binnenkort"-badge op events binnen URGENT_DAYS (M7 Fase G).
     Dieper rood dan --color-error voor visueel onderscheid tussen
     waarschuwing en time-criticality. Witte tekst → contrast 7.4:1 (AAA). */
  --color-urgent: #c0252b;
  --color-on-urgent: #ffffff;

  /* === Typografie (DESIGN.md §2) ====================================== */

  --font-heading: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --font-size-base: 1rem; /* 16px */
  --line-height-base: 1.5;

  /* Type-schaal */
  --size-display-xl: 4rem; /* 64px, h1 hero */
  --size-headline-lg: 2.5rem; /* 40px, h2 sectie */
  --size-headline-md: 2rem; /* 32px, card-titel groot */
  --size-h3-featured: 1.5rem; /* 24px */
  --size-h4-grid: 1.25rem; /* 20px */
  --size-body-lg: 1.125rem; /* 18px, hero-lede */
  --size-body-md: 1rem; /* 16px, default */
  --size-button: 0.9375rem; /* 15px */
  --size-label-md: 0.875rem; /* 14px, filter-waardes */
  --size-meta: 0.75rem; /* 12px, spreker-naam */
  --size-kicker: 0.625rem; /* 10px, badges, kicker */
  --size-wordmark: 1.5rem; /* 24px */

  /* === Spacing (DESIGN.md §3, 4px-basis) ============================== */

  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.75rem; /* 12px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 3rem; /* 48px */
  --space-xl: 4rem; /* 64px */
  --space-2xl: 5rem; /* 80px */

  --container-max: 80rem; /* 1280px */
  --container-padding-x: 1.5rem; /* 24px overal */
  --content-top-padding: 8rem; /* 128px voor fixed header */
  --content-max-prose: 42rem; /* ~672px — leeskolom op tekstpagina's */

  /* === Componentvormgeving (DESIGN.md §4) ============================= */

  --radius-card: 0.75rem; /* 12px */
  --radius-button: 0.75rem; /* 12px */
  --radius-pill: 9999px; /* avatars, badges, chevron-knoppen */
  --radius-hero: 1.125rem; /* 18px — event-detail hero-band (DESIGN.md §8) */

  /* Event-detailpagina — 2-koloms layout (DESIGN.md §8) */
  --detail-sidebar-width: 20rem; /* 320px — vaste sidebar */
  --detail-content-max: var(--content-max-prose); /* leeskolom — gelijk aan tekstpagina's */
  --detail-hero-height: 26.875rem; /* ~430px — hero-band hoogte */

  /* Schaduwen — exact uit DESIGN.md */
  --shadow-card: 0 10px 30px rgba(62, 60, 50, 0.08);
  --shadow-bar: 0 4px 20px rgba(0, 0, 0, 0.03);
  --shadow-footer-up: 0 -10px 30px rgba(62, 60, 50, 0.1);

  /* Borders */
  --border-card: 1px solid color-mix(in srgb, #cac6bc 30%, transparent);
  --border-light: 1px solid color-mix(in srgb, #cac6bc 50%, transparent);
  --border-header-footer: 1px solid #e7e5e4;

  /* Transitions */
  --transition-default: 150ms ease;
  --transition-card-image: 500ms ease;
  --transition-featured-image: 700ms ease;
  --transition-footer:
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;

  /* Focus */
  --focus-ring-color: var(--color-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Layout — header */
  --header-height: 5rem; /* 80px */
}