/* Howest WDD Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --brand-blue: #407BCA;
  --brand-cream: #F8F5EE;
  --brand-yellow: #EABD44;
  --brand-gold: #B8901F;
  --brand-pink: #DB79C5;
  --brand-green: #3FB68B;
  --brand-ink: #22252B;
  --brand-night: #14161C;
  --campaign-blue: #3E79C6;
  --campaign-yellow: #F9AC0D;
  --campaign-pink: #F367AC;
  --campaign-cream: #FCF2ED;
  --campaign-ink: #110E0C;
  --canvas: #F8F5EE;
  --on-canvas: #22252B;
  --canvas-line: #E4E0D3;
  --brand-surface: #3A70B8;
  --on-brand: #FBFBF8;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F3EFE6;
  --surface-muted: #ECE8DD;
  --surface-inverse: #22252B;
  --on-inverse: #FBFBF8;
  --text: #22252B;
  --text-muted: #5B5F6B;
  --text-link: #2F65AE;
  --eyebrow: #2F65AE;
  --border: #E4E0D3;
  --border-control: #858894;
  --focus-ring: #22252B;
  --primary: #3A70B8;
  --on-primary: #FBFBF8;
  --primary-soft: #3A70B81f;
  --cta: #DB79C5;
  --on-cta: #22252B;
  --accent: #EABD44;
  --on-accent: #22252B;
  --accent-soft: #EABD444c;
  --success: oklch(0.5 0.1 190);
  --on-success: #FBFBF8;
  --success-soft: oklch(0.5 0.1 190 / 0.12);
  --warning: oklch(0.76 0.15 65);
  --on-warning: #22252B;
  --warning-soft: oklch(0.76 0.15 65 / 0.18);
  --danger: oklch(0.55 0.21 27);
  --on-danger: #FBFBF8;
  --danger-soft: oklch(0.55 0.21 27 / 0.1);
  --danger-text: oklch(0.5 0.2 27);
  --info: #3A70B8;
  --info-soft: #3A70B81a;
  --chart-1: #407BCA;
  --chart-2: #D9A421;
  --chart-3: #C9539F;
  --chart-4: oklch(0.45 0.14 300);
  --chart-5: #2E9C74;
  --chart-grid: #E4E0D3;
  --scrim: oklch(0.15 0.01 260 / 0.5);
  --shadow-xs: 0 1px 2px oklch(0.3 0.08 255 / 0.1);
  --shadow-sm: 0 1px 3px oklch(0.3 0.08 255 / 0.12), 0 1px 2px oklch(0.3 0.08 255 / 0.08);
  --shadow-lg: 0 10px 15px -3px oklch(0.3 0.08 255 / 0.12), 0 4px 6px -4px oklch(0.3 0.08 255 / 0.08);
  --shadow-hover: 0 20px 25px -5px oklch(0.3 0.08 255 / 0.16);
  --shadow-soft: 0 18px 48px oklch(0.3 0.08 255 / 0.16);
  --shadow-lifted: 0 24px 64px oklch(0.3 0.08 255 / 0.22);
  --shadow-accent: 0 10px 15px -3px oklch(0.82 0.16 85 / 0.3);
}

[data-theme="dark"] {
  --canvas: #14161C;
  --on-canvas: #FBFBF8;
  --canvas-line: #2C303B;
  --brand-surface: #2E5E9E;
  --on-brand: #FBFBF8;
  --surface: #1F222B;
  --surface-raised: #262A34;
  --surface-sunken: #191B22;
  --surface-muted: #2C303B;
  --surface-inverse: #FBFBF8;
  --on-inverse: #22252B;
  --text: #FBFBF8;
  --text-muted: #BFC3CC;
  --text-link: #8FB4E6;
  --eyebrow: #EABD44;
  --border: #2C303B;
  --border-control: #6E7380;
  --focus-ring: #EABD44;
  --primary: #6A9BDC;
  --on-primary: #22252B;
  --primary-soft: #6A9BDC2e;
  --cta: #DB79C5;
  --on-cta: #22252B;
  --accent: #EABD44;
  --on-accent: #22252B;
  --accent-soft: #EABD4433;
  --success: oklch(0.74 0.11 185);
  --on-success: #22252B;
  --success-soft: oklch(0.74 0.11 185 / 0.16);
  --warning: oklch(0.8 0.14 65);
  --on-warning: #22252B;
  --warning-soft: oklch(0.8 0.14 65 / 0.16);
  --danger: oklch(0.7 0.17 25);
  --on-danger: #22252B;
  --danger-soft: oklch(0.7 0.17 25 / 0.16);
  --danger-text: oklch(0.76 0.14 25);
  --info: #6A9BDC;
  --info-soft: #6A9BDC24;
  --chart-1: #5A8FD6;
  --chart-2: oklch(0.66 0.13 85);
  --chart-3: oklch(0.64 0.18 345);
  --chart-4: oklch(0.5 0.17 288);
  --chart-5: #2F9E75;
  --chart-grid: #2C303B;
  --scrim: oklch(0.05 0.01 260 / 0.7);
  --shadow-xs: 0 1px 2px oklch(0.08 0.03 255 / 0.28);
  --shadow-sm: 0 1px 3px oklch(0.08 0.03 255 / 0.32), 0 1px 2px oklch(0.08 0.03 255 / 0.2);
  --shadow-lg: 0 10px 15px -3px oklch(0.08 0.03 255 / 0.34), 0 4px 6px -4px oklch(0.08 0.03 255 / 0.22);
  --shadow-hover: 0 20px 25px -5px oklch(0.08 0.03 255 / 0.4);
  --shadow-soft: 0 18px 48px oklch(0.08 0.03 255 / 0.38);
  --shadow-lifted: 0 24px 64px oklch(0.08 0.03 255 / 0.45);
}

:root {
  --space-0: 0px;
  --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-24: 96px;
  --radius-xs: 4px;
  --radius-control: 6px;
  --radius-menu: 8px;
  --radius-panel: 12px;
  --radius-tile: 14px;
  --radius-modal: 16px;
  --radius-card: 20px;
  --radius-shell: 32px;
  --radius-pill: 999px;
  --z-base: 0;
  --z-canvas: -10;
  --z-sticky: 20;
  --z-sidebar: 30;
  --z-dropdown: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-tooltip: 70;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --font-sans: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Nunito", "Karla", ui-sans-serif, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.display-2xl { font-family: var(--font-display); font-size: 96px; line-height: 0.95; font-weight: 900; letter-spacing: -0.035em; }
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 1; font-weight: 900; letter-spacing: -0.035em; }
.display-lg { font-family: var(--font-display); font-size: 48px; line-height: 1.05; font-weight: 900; letter-spacing: -0.035em; }
.heading-1 { font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-weight: 900; letter-spacing: -0.03em; }
.heading-2 { font-family: var(--font-display); font-size: 30px; line-height: 1.15; font-weight: 900; letter-spacing: -0.025em; }
.heading-3 { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.heading-4 { font-family: var(--font-display); font-size: 20px; line-height: 1.3; font-weight: 700; }
.heading-5 { font-family: var(--font-display); font-size: 18px; line-height: 1.35; font-weight: 700; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.625; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.body-lg-semibold { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 600; }
.body-lg-bold { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 700; }
.body-semibold { font-family: var(--font-sans); font-size: 16px; line-height: 1.625; font-weight: 600; }
.body-bold { font-family: var(--font-sans); font-size: 16px; line-height: 1.625; font-weight: 700; }
.body-sm-semibold { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 600; }
.body-sm-bold { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 700; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 400; }
.caption-bold { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 700; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 1.25; font-weight: 500; }
.label-sm { font-family: var(--font-sans); font-size: 12px; line-height: 1.25; font-weight: 500; }
.nav { font-family: var(--font-sans); font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0.08em; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: 0.2em; }
.stat { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; font-weight: 400; }