/* GEGENEREERD door resources/design-system/build.py uit tokens.json. Niet met de hand bewerken. */

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

:root,
[data-theme="light"] {
  color-scheme: light;
  --brand: #f57f20;
  --brand-deep: #ed5210;
  --brand-grey: #808184;
  --surface: #dee2e6;
  --surface-raised: #ffffff;
  --surface-sunken: #f0f2f5;
  --line: #d5d9de;
  --line-strong: #8d9096;
  --ink: #2a2b2e;
  --ink-muted: #5d5f64;
  --action: #1a73e8;
  --action-hover: #1565c0;
  --on-action: #ffffff;
  --action-soft: #e8f1fc;
  --action-soft-ink: #0f4fa3;
  --link: #0f4fa3;
  --info-soft: #e8f1fc;
  --success: #1f7a4d;
  --success-soft: #e7f4ec;
  --warning: #8a5300;
  --warning-soft: #fff4dc;
  --danger: #c2253a;
  --danger-soft: #fdecee;
  --nav-bg: #1565c0;
  --nav-active: #0f4fa3;
  --nav-hover: #1257ab;
  --nav-ink: #ffffff;
  --nav-ink-muted: #ffffff;
  --focus: #0f4fa3;
  --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-pop: 0 8px 24px rgba(42,43,46,0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #f57f20;
    --brand-deep: #ed5210;
    --brand-grey: #808184;
    --surface: #17181a;
    --surface-raised: #202226;
    --surface-sunken: #131416;
    --line: #32353a;
    --line-strong: #6a6d73;
    --ink: #ececee;
    --ink-muted: #a9abb0;
    --action: #5b9cf0;
    --action-hover: #7fb3f4;
    --on-action: #0b1f3a;
    --action-soft: #12283f;
    --action-soft-ink: #9cc3f5;
    --link: #7fb3f4;
    --info-soft: #12283f;
    --success: #5fd39a;
    --success-soft: #11301f;
    --warning: #f0b44c;
    --warning-soft: #33270f;
    --danger: #ff7a8a;
    --danger-soft: #3a1419;
    --nav-bg: #0f4fa3;
    --nav-active: #083066;
    --nav-hover: #0b3f85;
    --nav-ink: #ffffff;
    --nav-ink-muted: #ffffff;
    --focus: #7fb3f4;
    --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -1px rgba(0,0,0,0.4);
    --shadow-pop: 0 8px 24px rgba(0,0,0,0.55);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --brand: #f57f20;
  --brand-deep: #ed5210;
  --brand-grey: #808184;
  --surface: #17181a;
  --surface-raised: #202226;
  --surface-sunken: #131416;
  --line: #32353a;
  --line-strong: #6a6d73;
  --ink: #ececee;
  --ink-muted: #a9abb0;
  --action: #5b9cf0;
  --action-hover: #7fb3f4;
  --on-action: #0b1f3a;
  --action-soft: #12283f;
  --action-soft-ink: #9cc3f5;
  --link: #7fb3f4;
  --info-soft: #12283f;
  --success: #5fd39a;
  --success-soft: #11301f;
  --warning: #f0b44c;
  --warning-soft: #33270f;
  --danger: #ff7a8a;
  --danger-soft: #3a1419;
  --nav-bg: #0f4fa3;
  --nav-active: #083066;
  --nav-hover: #0b3f85;
  --nav-ink: #ffffff;
  --nav-ink-muted: #ffffff;
  --focus: #7fb3f4;
  --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -1px rgba(0,0,0,0.4);
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.55);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --nav-width: 232px;
  --topbar-height: 56px;
  --content-max: 1280px;
  --control-height: 36px;
  --font-display: "Nunito", "Nunito Sans", system-ui, sans-serif;
  --font-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.rl-text-display { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -0.01em; }

.rl-text-heading-1 { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 800; }

.rl-text-stat { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }

.rl-text-heading-2 { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 700; }

.rl-text-heading-3 { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 700; }

.rl-text-body { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }

.rl-text-body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 700; }

.rl-text-small { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 400; }

.rl-text-label { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }