/* GEGENEREERD door tools/build_design_system.py — NIET HANDMATIG WIJZIGEN */
/* tenant: _default | brand-accent: oklch(55.5% 0.046 162) */

:root {
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --gap-inline: 8px;
  --gap-stack: 12px;
  --gap-card: 24px;
  --gap-section: 48px;
  --touch-min: 44px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --dur-instant: 100ms;
  --dur-fast: 150ms;
  --dur-default: 200ms;
  --dur-slow: 300ms;
  --dur-slower: 500ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-linear: linear;
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-features: 'cv11', 'ss03';
  --font-display-size: clamp(2rem, 5vw, 3.5rem);
  --font-display-weight: 500;
  --font-display-line-height: 1.1;
  --font-display-letter-spacing: -0.01em;
  --font-headline-size: clamp(1.5rem, 3vw, 2rem);
  --font-headline-weight: 600;
  --font-headline-line-height: 1.2;
  --font-headline-letter-spacing: -0.015em;
  --font-title-size: 1.125rem;
  --font-title-weight: 600;
  --font-title-line-height: 1.4;
  --font-title-letter-spacing: -0.005em;
  --font-body-size: 0.9375rem;
  --font-body-weight: 400;
  --font-body-line-height: 1.55;
  --font-body-letter-spacing: normal;
  --font-body-strong-size: 0.9375rem;
  --font-body-strong-weight: 600;
  --font-body-strong-line-height: 1.55;
  --font-body-strong-letter-spacing: normal;
  --font-small-size: 0.8125rem;
  --font-small-weight: 400;
  --font-small-line-height: 1.5;
  --font-small-letter-spacing: normal;
  --font-label-size: 0.6875rem;
  --font-label-weight: 600;
  --font-label-line-height: 1.2;
  --font-label-letter-spacing: 0.08em;
  --font-mono-sm-size: 0.8125rem;
  --font-mono-sm-weight: 400;
  --font-mono-sm-line-height: 1.5;
  --font-mono-sm-letter-spacing: normal;
}

:root,
[data-theme='light'] {
  --c-surface-base: oklch(99% 0.003 80);
  --c-surface-raised: oklch(100% 0 0);
  --c-surface-sunken: oklch(96% 0.005 80);
  --c-surface-overlay: oklch(20% 0.014 285);
  --c-border-subtle: oklch(94% 0.005 80);
  --c-border-default: oklch(88% 0.008 80);
  --c-border-strong: oklch(80% 0.01 80);
  --c-fg-default: oklch(20% 0.01 285);
  --c-fg-muted: oklch(50% 0.01 285);
  --c-fg-subtle: oklch(65% 0.008 285);
  --c-fg-on-overlay: oklch(96% 0.005 80);
  --c-success: oklch(62% 0.16 145);
  --c-success-soft: oklch(94% 0.05 145);
  --c-success-fg: oklch(28% 0.10 145);
  --c-warning: oklch(72% 0.16 70);
  --c-warning-soft: oklch(96% 0.05 70);
  --c-warning-fg: oklch(40% 0.10 70);
  --c-danger: oklch(58% 0.20 25);
  --c-danger-soft: oklch(95% 0.04 25);
  --c-danger-fg: oklch(35% 0.14 25);
  --c-info: oklch(60% 0.16 245);
  --c-info-soft: oklch(95% 0.04 245);
  --c-info-fg: oklch(35% 0.12 245);
  --c-focus-ring: oklch(60% 0.08 162 / 0.40);
  --shadow-flat: none;
  --shadow-xs: 0 1px 2px oklch(20% 0.01 285 / 0.04);
  --shadow-sm: 0 4px 8px oklch(20% 0.01 285 / 0.06), 0 1px 2px oklch(20% 0.01 285 / 0.04);
  --shadow-md: 0 8px 16px oklch(20% 0.01 285 / 0.08), 0 2px 4px oklch(20% 0.01 285 / 0.05);
  --shadow-lg: 0 16px 32px oklch(20% 0.01 285 / 0.12), 0 4px 8px oklch(20% 0.01 285 / 0.06);
  --shadow-xl: 0 24px 48px oklch(20% 0.01 285 / 0.18), 0 8px 16px oklch(20% 0.01 285 / 0.08);
  --shadow-focus: 0 0 0 2px var(--c-focus-ring);
}

[data-theme='dark'] {
  --c-surface-base: oklch(13% 0.01 285);
  --c-surface-raised: oklch(17% 0.012 285);
  --c-surface-sunken: oklch(9% 0.008 285);
  --c-surface-overlay: oklch(22% 0.014 285);
  --c-border-subtle: oklch(20% 0.015 285);
  --c-border-default: oklch(28% 0.018 285);
  --c-border-strong: oklch(40% 0.02 285);
  --c-fg-default: oklch(96% 0.005 80);
  --c-fg-muted: oklch(70% 0.008 80);
  --c-fg-subtle: oklch(55% 0.008 80);
  --c-fg-on-overlay: oklch(96% 0.005 80);
  --c-success: oklch(68% 0.17 145);
  --c-success-soft: oklch(28% 0.08 145);
  --c-success-fg: oklch(85% 0.10 145);
  --c-warning: oklch(78% 0.16 70);
  --c-warning-soft: oklch(30% 0.08 70);
  --c-warning-fg: oklch(88% 0.10 70);
  --c-danger: oklch(66% 0.20 25);
  --c-danger-soft: oklch(28% 0.10 25);
  --c-danger-fg: oklch(88% 0.12 25);
  --c-info: oklch(68% 0.16 245);
  --c-info-soft: oklch(28% 0.08 245);
  --c-info-fg: oklch(88% 0.10 245);
  --c-focus-ring: oklch(62% 0.08 162 / 0.45);
  --shadow-flat: none;
  --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-sm: 0 4px 8px oklch(0% 0 0 / 0.5), 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-md: 0 8px 16px oklch(0% 0 0 / 0.55), 0 2px 4px oklch(0% 0 0 / 0.35);
  --shadow-lg: 0 16px 32px oklch(0% 0 0 / 0.65), 0 4px 8px oklch(0% 0 0 / 0.4);
  --shadow-xl: 0 24px 48px oklch(0% 0 0 / 0.75), 0 8px 16px oklch(0% 0 0 / 0.5);
  --shadow-focus: 0 0 0 2px var(--c-focus-ring);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --c-surface-base: oklch(13% 0.01 285);
    --c-surface-raised: oklch(17% 0.012 285);
    --c-surface-sunken: oklch(9% 0.008 285);
    --c-surface-overlay: oklch(22% 0.014 285);
    --c-border-subtle: oklch(20% 0.015 285);
    --c-border-default: oklch(28% 0.018 285);
    --c-border-strong: oklch(40% 0.02 285);
    --c-fg-default: oklch(96% 0.005 80);
    --c-fg-muted: oklch(70% 0.008 80);
    --c-fg-subtle: oklch(55% 0.008 80);
    --c-fg-on-overlay: oklch(96% 0.005 80);
    --c-success: oklch(68% 0.17 145);
    --c-success-soft: oklch(28% 0.08 145);
    --c-success-fg: oklch(85% 0.10 145);
    --c-warning: oklch(78% 0.16 70);
    --c-warning-soft: oklch(30% 0.08 70);
    --c-warning-fg: oklch(88% 0.10 70);
    --c-danger: oklch(66% 0.20 25);
    --c-danger-soft: oklch(28% 0.10 25);
    --c-danger-fg: oklch(88% 0.12 25);
    --c-info: oklch(68% 0.16 245);
    --c-info-soft: oklch(28% 0.08 245);
    --c-info-fg: oklch(88% 0.10 245);
    --c-focus-ring: oklch(62% 0.08 162 / 0.45);
    --shadow-flat: none;
    --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.4);
    --shadow-sm: 0 4px 8px oklch(0% 0 0 / 0.5), 0 1px 2px oklch(0% 0 0 / 0.3);
    --shadow-md: 0 8px 16px oklch(0% 0 0 / 0.55), 0 2px 4px oklch(0% 0 0 / 0.35);
    --shadow-lg: 0 16px 32px oklch(0% 0 0 / 0.65), 0 4px 8px oklch(0% 0 0 / 0.4);
    --shadow-xl: 0 24px 48px oklch(0% 0 0 / 0.75), 0 8px 16px oklch(0% 0 0 / 0.5);
    --shadow-focus: 0 0 0 2px var(--c-focus-ring);
  }
}

[data-tenant='_default'],
:root {
  --c-brand-accent: oklch(55.5% 0.046 162);
  --c-brand-accent-fg: oklch(98% 0.005 80);
  --c-brand-accent-soft: oklch(93% 0.025 162);
  --c-brand-accent-muted: oklch(46% 0.05 162);
}

html { color-scheme: light dark; }
body.ui-v2 {
  background: var(--c-surface-base);
  color: var(--c-fg-default);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features, normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}