/* Design-Tokens (Indigo/Orange/Weiß), übernommen aus design/export/design/caprizeit-tokens.css. Dark Mode: <html data-theme="dark"> */
:root {
    --brand: #282d66;
    --accent: #f28c1e;
    --brand-deep: color-mix(in srgb, var(--brand) 76%, #000);
    --brand-ink: color-mix(in srgb, var(--brand) 52%, #000);
    --brand-soft: color-mix(in srgb, var(--brand) 11%, #fff);
    --brand-wash: color-mix(in srgb, var(--brand) 5%, #fff);
    --accent-deep: color-mix(in srgb, var(--accent) 82%, #000);
    --accent-soft: color-mix(in srgb, var(--accent) 14%, #fff);
    --on-accent: #1b1f52;
    --surface: #fff;
    --side-from: color-mix(in srgb, var(--brand) 52%, #000);
    --side-to: color-mix(in srgb, var(--brand) 76%, #000);
    --brand-link: var(--brand);
    --ink: color-mix(in srgb, var(--brand) 22%, #111);
    --muted: color-mix(in srgb, var(--brand) 35%, #6b6b6b);
    --line: color-mix(in srgb, var(--brand) 14%, #fff);
    --canvas: color-mix(in srgb, var(--brand) 4.5%, #fff);
    --danger: #b4233f;
    --danger-soft: #fdecef;
    --ok: #1f7a4d;
    --ok-soft: #e4f4ec;
    --warn: #a16207;
    --warn-soft: #fff4d6;
    --on-brand: #fff;          /* Text auf Brand/Status-Flächen */
    --on-status: #fff;
    --radius: 12px;
    --ruhig: .15s ease-out;    /* Übergänge für Hover/Fokus */
    --shadow: 0 1px 2px rgba(27, 31, 82, .06), 0 8px 24px -8px rgba(27, 31, 82, .14);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --canvas: color-mix(in srgb, var(--brand) 8%, #0b0d1a);
    --surface: color-mix(in srgb, var(--brand) 9%, #151829);
    --ink: #e8eaf8;
    --muted: #a6abcf;
    --line: color-mix(in srgb, var(--brand) 26%, #1a1d33);
    --brand-soft: color-mix(in srgb, var(--brand) 26%, #151829);
    --brand-wash: color-mix(in srgb, var(--brand) 13%, #151829);
    --brand-ink: color-mix(in srgb, var(--brand) 35%, #fff);
    --brand-link: color-mix(in srgb, var(--brand) 50%, #fff);
    --accent-soft: color-mix(in srgb, var(--accent) 20%, #151829);
    --danger: #ff8fa5;
    --danger-soft: color-mix(in srgb, #b4233f 28%, #151829);
    --ok: #6fd3a0;
    --ok-soft: color-mix(in srgb, #1f7a4d 30%, #151829);
    --warn: #f2c14e;
    --warn-soft: color-mix(in srgb, #a16207 30%, #151829);
    --on-status: #10121f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .6);
}