/* Design-Tokens (Farben, Schatten, Typo). Nur diese Variablen verwenden, keine neuen Hex-Werte. */

:root, [data-theme="default"] {
  --red-50: #ffedee;
  --red-100: #ffdadd;
  --red-150: #ffc7cc;
  --red-200: #ffb5bb;
  --red-300: #ff8f98;
  --red-400: #ff6a76;
  --red-500: #ff4554;
  --red-550: #e53e4b;
  --red-600: #cc3743;
  --red-650: #b2303b;
  --red-700: #992932;
  --blue-50: #e6f7fe;
  --blue-100: #cdeefd;
  --blue-200: #9adefb;
  --blue-300: #68cdf8;
  --blue-400: #35bdf6;
  --blue-500: #03acf4;
  --blue-550: #039adb;
  --blue-600: #028ac3;
  --blue-650: #0278aa;
  --blue-700: #026792;
  --mint-50: #e9faf7;
  --mint-100: #d3f5ef;
  --mint-200: #a6ebde;
  --mint-300: #7ae0ce;
  --mint-400: #4dd6bd;
  --mint-500: #21ccad;
  --mint-550: #1eb79b;
  --mint-600: #1aa38a;
  --mint-650: #178e79;
  --mint-700: #147a68;
  --neutral-0: #ffffff;
  --neutral-1: #fcfafa;
  --neutral-2: #f3f1f1;
  --neutral-3: #eae6e6;
  --neutral-4: #d3caca;
  --neutral-5: #bcaeae;
  --neutral-6: #a79595;
  --neutral-7: #927c7c;
  --neutral-8: #7a6666;
  --neutral-9: #615151;
  --neutral-10: #483c3c;
  --neutral-11: #2c2525;
  --neutral-12: #131010;
  --success-50: #e8f3ee;
  --success-500: #1c865a;
  --success-700: #115036;
  --error-50: #fbebec;
  --error-500: #d93845;
  --error-700: #822229;
  --warning-50: #fffbef;
  --warning-500: #ffdb5c;
  --warning-700: #998337;
  --alpha-red-12: rgba(255, 69, 84, 0.12);
  --alpha-mint-12: rgba(33, 204, 173, 0.12);
  --alpha-ink-6: rgba(19, 16, 16, 0.06);
  --alpha-ink-12: rgba(19, 16, 16, 0.12);
  --alpha-ink-60: rgba(19, 16, 16, 0.60);
  --alpha-white-12: rgba(255, 255, 255, 0.12);
  --alpha-darken-800: rgba(0, 0, 0, 0.73);
  --text-default: var(--neutral-12);
  --text-muted: var(--neutral-8);
  --text-subtle: var(--neutral-6);
  --text-soft: var(--neutral-4);
  --text-light: var(--neutral-2);
  --text-inverse: var(--neutral-0);
  --text-brand: var(--red-500);
  --text-brand-contrast: var(--red-600);
  --text-placeholder: var(--neutral-6);
  --text-success: var(--success-500);
  --text-success-contrast: var(--success-700);
  --text-error: var(--error-500);
  --text-error-contrast: var(--error-700);
  --text-warning: var(--warning-500);
  --text-warning-contrast: var(--warning-700);
  --surface-default: var(--neutral-1);
  --surface-page: var(--neutral-1);
  --surface-card: var(--neutral-0);
  --surface-color-white: var(--neutral-0);
  --surface-light: var(--neutral-2);
  --surface-soft: var(--neutral-3);
  --surface-muted: var(--neutral-6);
  --surface-info: var(--neutral-8);
  --surface-dark: var(--neutral-12);
  --surface-dark-60: var(--alpha-ink-60);
  --surface-dark-12: var(--alpha-ink-12);
  --surface-dark-6: var(--alpha-ink-6);
  --surface-brand: var(--red-500);
  --surface-brand-contrast: var(--red-600);
  --surface-brand-light: var(--red-50);
  --surface-brand-12: var(--alpha-red-12);
  --surface-highlight: var(--blue-550);
  --surface-highlight-contrast: var(--blue-700);
  --surface-success: var(--success-50);
  --surface-error: var(--error-50);
  --surface-warning: var(--warning-50);
  --surface-overlay: var(--alpha-ink-60);
  --border-default: var(--neutral-12);
  --border-default-12: var(--alpha-ink-6);
  --border-soft: var(--neutral-3);
  --border-muted: var(--neutral-6);
  --border-strong: var(--neutral-12);
  --border-inverse: var(--neutral-0);
  --border-brand: var(--red-500);
  --border-brand-contrast: var(--red-600);
  --border-error: var(--error-500);
  --border-success: var(--success-500);
  --border-focus: var(--blue-500);
  --icon-default: var(--neutral-12);
  --icon-muted: var(--neutral-6);
  --icon-soft: var(--neutral-4);
  --icon-light: var(--neutral-2);
  --icon-inverse: var(--neutral-0);
  --icon-brand: var(--red-500);
  --icon-brand-contrast: var(--red-600);
  --icon-success: var(--success-500);
  --icon-error: var(--error-500);
  --icon-warning: var(--warning-700);
  --surface-ink: #1a1a1b;
  --on-dark-heading: #dedee2;
  --on-dark-text: #acacaf;
  --on-dark-border: #5f5f62;
  --chart-green: var(--success-500);
  --chart-green-soft: #e3f1ea;
  --chart-red: var(--red-500);
  --shadow-sm: 0 1px 2px rgba(26, 26, 27, 0.06), 0 1px 3px rgba(26, 26, 27, 0.10);
  --shadow-md: 0 2px 6px rgba(26, 26, 27, 0.06), 0 6px 16px rgba(26, 26, 27, 0.10);
  --shadow-lg: 0 2px 8px rgba(26, 26, 27, 0.06), 0 12px 32px rgba(26, 26, 27, 0.12);
  --focus-ring: 0 0 0 3px rgba(3, 172, 244, 0.40);
}
:root {
  --space-6xs: 2px;
  --space-5xs: 4px;
  --space-4xs: 6px;
  --space-3xs: 8px;
  --space-2xs: 12px;
  --space-xs: 16px;
  --space-s: 18px;
  --space-m: 20px;
  --space-l: 24px;
  --space-xl: 28px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 60px;
  --space-6xl: 80px;
  --border-width: 1px;
  --border-width-thick: 2px;
  --container-max: 1280px;
  --icon-sm: 24px;
  --icon-lg: 100px;
  --icon-xs: 16px;
  --icon-md: 32px;
  --icon-xl: 48px;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-full: 50%;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  --icon-weight-ui: 700;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-button: 0.03em;
  --tracking-eyebrow: 0.06em;
  --font-sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-icon-weight-feature: thin;
  --text-text-display: 400 44px/1.4 var(--font-sans);
  --text-text-h1: 400 34px/1.4 var(--font-sans);
  --text-text-h2: 400 28px/1.4 var(--font-sans);
  --text-text-h3: 400 24px/1.4 var(--font-sans);
  --text-text-h4: 400 21px/1.4 var(--font-sans);
  --text-text-h5: 400 18px/1.4 var(--font-sans);
  --text-text-h6: 400 16px/1.4 var(--font-sans);
  --text-text-body-lg: 400 18px/1.4 var(--font-sans);
  --text-text-body: 400 16px/1.4 var(--font-sans);
  --text-text-body-sm: 400 14px/1.4 var(--font-sans);
  --text-text-body-xs: 400 12px/1.4 var(--font-sans);
  --text-text-label: 400 14px/1.4 var(--font-sans);
  --text-text-h1-extreme: 400 44px/1.4 var(--font-sans);
  --text-text-headline-1: 400 34px/1.4 var(--font-sans);
  --text-text-headline-2: 400 28px/1.4 var(--font-sans);
  --text-text-headline-3: 400 24px/1.4 var(--font-sans);
  --text-text-headline-4: 400 21px/1.4 var(--font-sans);
  --text-text-headline-5: 400 18px/1.4 var(--font-sans);
  --text-text-headline-6: 400 16px/1.4 var(--font-sans);
  --text-text-paragraph-big: 400 18px/1.4 var(--font-sans);
  --text-text-paragraph-medium: 400 16px/1.4 var(--font-sans);
  --text-text-paragraph-small: 400 14px/1.4 var(--font-sans);
  --text-text-paragraph-xs: 400 12px/1.4 var(--font-sans);
  --text-body: 500 16px/1.6 var(--font-sans); /* From `body` in tokens/base.css. */
}
.text-display {
  font-family: var(--font-sans);
  font-size: 44px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-h1 {
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-h2 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-h3 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-h4 {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-h5 {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-h6 {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-body-xs {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.07em;
}
.text-h1-extreme {
  font-family: var(--font-sans);
  font-size: 44px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-headline-1 {
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-headline-2 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-headline-3 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-headline-4 {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-headline-5 {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-headline-6 {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-paragraph-big {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-paragraph-medium {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-paragraph-small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-paragraph-xs {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0;
}