@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400..800&display=swap");

    :root {
      /* ── basis: vijf vaste kleuren + states + alpha's ── */
      --bb-ink: #0D0F12;
      --bb-charcoal: #22272F;
      --bb-teal: #00D2BE;
      --bb-white: #FFFFFF;
      --bb-muted: #A7AEB8;
      --bb-teal-hover: #5CE4D6;
      --bb-teal-press: #00B8A6;
      --bb-sunken: #171A1F;
      --bb-muted-on-inverse: #5A6472;
      --bb-line-on-inverse: #E4E7EB;
      --bb-sunken-on-inverse: #F5F6F8;
      --bb-teal-a08: rgba(0, 210, 190, 0.08);
      --bb-teal-a15: rgba(0, 210, 190, 0.15);
      --bb-teal-a25: rgba(0, 210, 190, 0.25);
      --bb-teal-a40: rgba(0, 210, 190, 0.40);
      --bb-white-a06: rgba(255, 255, 255, 0.06);
      --bb-white-a10: rgba(255, 255, 255, 0.10);
      --bb-white-a70: rgba(255, 255, 255, 0.70);
      --bb-ink-a06: rgba(13, 15, 18, 0.06);
      --bb-ink-a60: rgba(13, 15, 18, 0.60);
      --bb-ink-a85: rgba(13, 15, 18, 0.85);

      /* ── typografie ── */
      --font-core: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
      --font-mono: ui-monospace, monospace;
      --text-display-size: clamp(2rem, 9vw, 3.5rem);
      --text-display-size-tablet: 46px;
      --text-display-size-mobile: 34px;
      --text-display-lh: 1.06;
      --text-display-weight: 800;
      --text-display-tracking: -0.01em;
      --text-h1-size: clamp(1.75rem, 7.2vw, 2.5rem);
      --text-h1-lh: 1.12;
      --text-h1-weight: 800;
      --text-h1-tracking: -0.01em;
      --text-h2-size: clamp(1.375rem, 5.6vw, 1.75rem);
      --text-h2-lh: 1.2;
      --text-h2-weight: 700;
      --text-h2-tracking: -0.005em;
      --text-h3-size: 19px;
      --text-h3-lh: 1.35;
      --text-h3-weight: 700;
      --text-body-size: 16px;
      --text-body-lh: 1.55;
      --text-body-lg-size: 19px;
      --text-body-lg-lh: 1.55;
      --text-small-size: 14px;
      --text-small-lh: 1.5;
      --text-eyebrow-size: 12px;
      --text-eyebrow-lh: 1.3;
      --text-eyebrow-weight: 700;
      --text-eyebrow-tracking: 0.16em;
      --text-metric-size: 44px;
      --text-metric-lh: 1;
      --text-metric-weight: 800;
      --text-metric-tracking: -0.02em;
      --text-label-size: 14px;
      --text-label-sm-size: 13px;
      --text-tag-sm-size: 11px;
      --text-label-weight: 700;
      --text-label-tracking: 0.01em;
      --text-footnote-size: 12px;
      --text-footnote-lh: 1.6;

      /* ── hoekafronding ── */
      --radius-sm: 4px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-pill: 999px;

      /* ── ruimte en layout ── */
      --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;
      --content-max: 1180px;
      --page-gutter: 40px;
      --section-gap: 64px;
      --card-padding: 24px;
      --card-gap: 16px;
      --measure: 62ch;
      --heading-measure: 22ch;

      /* ── beweging ── */
      --dur-fast: 120ms;
      --dur-base: 180ms;
      --dur-slow: 320ms;
      --dur-reveal: 520ms;
      --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
      --ease-out: cubic-bezier(0, 0.6, 0.3, 1);
      --ease-in: cubic-bezier(0.5, 0, 1, 0.5);
      --press-scale: 0.98;
      --reveal-rise: 8px;

      /* ── vormtaal-maten ── */
      --pattern-halftone-size: 14px 14px;
      --pattern-blueprint-size: 28px 28px;
      --corner-marker-size: 18px;
      --corner-marker-width: 1.5px;
      --cut-seam-width: 3px;
      --skyline-opacity-texture: 0.15;

      /* ── semantisch: vlakken (donker-eerst) ── */
      --surface-page: var(--bb-ink);
      --surface-card: var(--bb-charcoal);
      --surface-sunken: var(--bb-sunken);
      --surface-inverse: var(--bb-white);
      --surface-accent: var(--bb-teal);

      /* ── semantisch: tekst ── */
      --text-heading: var(--bb-white);
      --text-body: var(--bb-white);
      --text-muted: var(--bb-muted);
      --text-accent: var(--bb-teal);
      --text-on-accent: var(--bb-ink);
      --text-on-inverse: var(--bb-ink);
      --text-muted-on-inverse: var(--bb-muted-on-inverse);

      /* ── semantisch: lijnen ── */
      --line-hairline: var(--bb-charcoal);
      --line-accent: var(--bb-teal);
      --line-on-inverse: var(--bb-line-on-inverse);
      --line-focus: var(--bb-teal);

      /* ── semantisch: interactie ── */
      --action-fill: var(--bb-teal);
      --action-fill-hover: var(--bb-teal-hover);
      --action-fill-press: var(--bb-teal-press);
      --action-fill-disabled: var(--bb-teal-a25);
      --action-label: var(--bb-ink);
      --action-label-disabled: var(--bb-muted);
      --action-outline: var(--bb-teal);

      /* ── semantisch: tags ── */
      --tag-accent-bg: var(--bb-teal-a15);
      --tag-accent-fg: var(--bb-teal);
      --tag-neutral-bg: transparent;
      --tag-neutral-fg: var(--bb-white);
      --tag-neutral-line: var(--bb-charcoal);

      /* ── diepte en gloed (vlak systeem: geen slagschaduwen) ── */
      --shadow-none: none;
      --shadow-card-on-light: 0 1px 2px var(--bb-ink-a06), 0 8px 24px var(--bb-ink-a06);
      --glow-teal: 0 0 0 1px var(--bb-teal-a40), 0 8px 32px var(--bb-teal-a15);
      --focus-ring: 0 0 0 2px var(--bb-ink), 0 0 0 4px var(--bb-teal);
      --gradient-hero-glow: radial-gradient(120% 90% at 8% 0%, var(--bb-teal-a25) 0%, var(--bb-teal-a08) 38%, transparent 68%);
      --gradient-metric: linear-gradient(96deg, var(--bb-teal) 0%, var(--bb-white) 92%);
      --gradient-divider: linear-gradient(90deg, transparent, var(--bb-teal) 18%, var(--bb-teal) 82%, transparent);
      --gradient-vignette: radial-gradient(120% 120% at 50% 50%, transparent 42%, var(--bb-ink-a85) 100%);
      --filter-duotone: grayscale(1) contrast(1.08);

      /* ── vormtaal-patronen ── */
      --skyline-asset: url("/images/skyline-frieze.png");
      --pattern-halftone: radial-gradient(var(--bb-teal) 1px, transparent 1.2px);
      --pattern-blueprint: linear-gradient(var(--bb-white-a06) 1px, transparent 1px), linear-gradient(90deg, var(--bb-white-a06) 1px, transparent 1px);
    }

    /* Licht vlak — alleen waar de CI erom vraagt (op-wit contexten).
       Zelfde vijf kleuren, omgekeerde rollen. */
    [data-bb-surface="light"] {
      --surface-page: var(--bb-white);
      --surface-card: var(--bb-white);
      --surface-sunken: var(--bb-sunken-on-inverse);
      --surface-inverse: var(--bb-ink);
      --text-heading: var(--bb-ink);
      --text-body: var(--bb-ink);
      --text-muted: var(--bb-muted-on-inverse);
      --text-on-accent: var(--bb-ink);
      --line-hairline: var(--bb-line-on-inverse);
      --action-label: var(--bb-ink);
      --tag-neutral-fg: var(--bb-ink);
      --tag-neutral-line: var(--bb-line-on-inverse);
      --focus-ring: 0 0 0 2px var(--bb-white), 0 0 0 4px var(--bb-teal);
    }