/* klasu Design Tokens – ERZEUGT aus tokens.json (node build-tokens.mjs). Nicht von Hand ändern. */
:root {
  --p-n-0: #FFFFFF;
  --p-n-50: #FAF6EF;
  --p-n-100: #F1EADD;
  --p-n-200: #E4DCCD;
  --p-n-500: #857B6B;
  --p-n-700: #5A5348;
  --p-n-900: #26221D;
  --p-d-950: #171513;
  --p-d-900: #1D1A17;
  --p-d-800: #2A2621;
  --p-d-700: #332E28;
  --p-d-600: #4A433A;
  --p-d-400: #8F8575;
  --p-d-300: #B9AE9C;
  --p-d-100: #EDE7DC;
  --p-g-900: #10231E;
  --p-g-700: #17574A;
  --p-g-600: #1E6B5A;
  --p-g-300: #6FC2AC;
  --p-g-200: #92D3C1;
  --p-g-100: #DCEFE8;
  --p-y-500: #F2B632;
  --p-y-800: #7A4B00;
  --p-y-100: #FFF1CC;
  --p-y-900: #3A2D10;
  --p-r-700: #B3261E;
  --p-r-300: #F2A097;
  --p-r-100: #FBE4E1;
  --p-r-900: #41201C;
  --p-b-700: #1F5FA8;
  --p-b-300: #8DB7E8;
  --p-b-100: #E3EEFA;
  --p-b-900: #1F2D3A;
  --p-s-700: #1B6B3A;
  --p-s-300: #7FCB9B;
  --p-s-100: #DDF1E4;
  --p-s-900: #1F3A2A;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 999px;
  --font-family-ui: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-amount: 'Courier Prime', ui-monospace, Menlo, Consolas, monospace;
  --font-family-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-weight-display: 300;
  --font-weight-body: 400;
  --font-weight-strong: 600;
  --font-size--1: 0.875rem;
  --font-size-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --font-size-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --font-size-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --font-size-3: clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem);
  --font-size-4: clamp(2.125rem, 1.6rem + 2.8vw, 3.5rem);
  --font-size-display: clamp(2.125rem, 1.2rem + 4.6vw, 5rem);
  --font-leading-tight: 1.1;
  --font-leading-snug: 1.3;
  --font-leading-body: 1.6;
  --font-tracking-display: 0.02em;
  --font-tracking-detail: 0.06em;
  --font-tracking-label: 0.12em;
  --font-measure: 60ch;
  --layout-container-sm: 40rem;
  --layout-container-md: 56rem;
  --layout-container-lg: 72rem;
  --layout-bp-sm: 30rem;
  --layout-bp-md: 48rem;
  --layout-bp-lg: 64rem;
  --layout-bp-xl: 80rem;
  --layout-target-min: 1.5rem;
  --layout-focus-ring: 3px;
  --layout-target-touch: 2.75rem;
  --motion-duration-fast: 100ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 300ms;
  --motion-duration-spin: 800ms;
  --motion-duration-shimmer: 1400ms;
  --motion-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --z-base: 0;
  --z-sticky: 10;
  --z-nav: 20;
  --z-overlay: 30;
  --z-dialog: 40;
  --z-toast: 50;
  --button-bg: var(--color-accent);
  --button-bg-hover: var(--color-accent-hover);
  --button-text: var(--color-text-on-accent);
  --button-radius: var(--radius-md);
  --button-min-height: var(--layout-target-touch);
  --input-bg: var(--color-surface-raised);
  --input-border: var(--color-border-strong);
  --input-radius: var(--radius-md);
  --input-min-height: var(--layout-target-touch);
  --card-bg: var(--color-surface-raised);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-5);
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #FAF6EF;
  --color-surface: #FAF6EF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #F1EADD;
  --color-surface-overlay: #FFFFFF;
  --color-border: #E4DCCD;
  --color-border-strong: #857B6B;
  --color-text: #26221D;
  --color-text-muted: #5A5348;
  --color-text-on-accent: #FFFFFF;
  --color-accent: #1E6B5A;
  --color-accent-hover: #17574A;
  --color-accent-subtle: #DCEFE8;
  --color-focus-ring: #1E6B5A;
  --color-new: #F2B632;
  --color-on-new: #26221D;
  --color-new-edge: #5A5348;
  --color-scrim: rgb(38 34 29 / 0.55);
  --color-ask-new-text: #26221D;
  --color-ask-new-bg: #F2B632;
  --color-ask-upcoming-text: #1E6B5A;
  --color-success: #1B6B3A;
  --color-success-bg: #DDF1E4;
  --color-warning: #7A4B00;
  --color-warning-bg: #FFF1CC;
  --color-error: #B3261E;
  --color-error-bg: #FBE4E1;
  --color-info: #1F5FA8;
  --color-info-bg: #E3EEFA;
  --color-amount-in: #1B6B3A;
  --color-amount-out: #B3261E;
  --color-module-messages: #1F5F8B;
  --color-module-messages-bg: #E3EEF7;
  --color-module-events: #7A2E6B;
  --color-module-events-bg: #F3E3F0;
  --color-module-cash: #7D5200;
  --color-module-cash-bg: #F6EBD3;
  --color-module-documents: #475666;
  --color-module-documents-bg: #E7EBEF;
  --color-module-consent: #0F6262;
  --color-module-consent-bg: #DDF0EF;
  --shadow-1: 0 1px 2px rgb(38 34 29 / 0.10), 0 1px 1px rgb(38 34 29 / 0.06);
  --shadow-2: 0 4px 12px rgb(38 34 29 / 0.12), 0 1px 3px rgb(38 34 29 / 0.08);
  --shadow-3: 0 12px 32px rgb(38 34 29 / 0.16), 0 2px 6px rgb(38 34 29 / 0.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #1D1A17;
    --color-surface: #1D1A17;
    --color-surface-raised: #2A2621;
    --color-surface-sunken: #171513;
    --color-surface-overlay: #332E28;
    --color-border: #4A433A;
    --color-border-strong: #8F8575;
    --color-text: #EDE7DC;
    --color-text-muted: #B9AE9C;
    --color-text-on-accent: #10231E;
    --color-accent: #6FC2AC;
    --color-accent-hover: #92D3C1;
    --color-accent-subtle: #1F3A33;
    --color-focus-ring: #6FC2AC;
    --color-new: #F2B632;
    --color-on-new: #26221D;
    --color-new-edge: #F2B632;
    --color-scrim: rgb(0 0 0 / 0.66);
    --color-ask-new-text: #F2B632;
    --color-ask-new-bg: transparent;
    --color-ask-upcoming-text: #6FC2AC;
    --color-success: #7FCB9B;
    --color-success-bg: #1F3A2A;
    --color-warning: #F2B632;
    --color-warning-bg: #3A2D10;
    --color-error: #F2A097;
    --color-error-bg: #41201C;
    --color-info: #8DB7E8;
    --color-info-bg: #1F2D3A;
    --color-amount-in: #7FCB9B;
    --color-amount-out: #F2A097;
    --color-module-messages: #86B8E3;
    --color-module-messages-bg: #1F2D3A;
    --color-module-events: #D8A0CC;
    --color-module-events-bg: #3A2536;
    --color-module-cash: #E3B96A;
    --color-module-cash-bg: #3A3020;
    --color-module-documents: #A9B6C4;
    --color-module-documents-bg: #2B3138;
    --color-module-consent: #7FD0CE;
    --color-module-consent-bg: #1F3A39;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: 0 0 0 1px #4A433A;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #1D1A17;
  --color-surface: #1D1A17;
  --color-surface-raised: #2A2621;
  --color-surface-sunken: #171513;
  --color-surface-overlay: #332E28;
  --color-border: #4A433A;
  --color-border-strong: #8F8575;
  --color-text: #EDE7DC;
  --color-text-muted: #B9AE9C;
  --color-text-on-accent: #10231E;
  --color-accent: #6FC2AC;
  --color-accent-hover: #92D3C1;
  --color-accent-subtle: #1F3A33;
  --color-focus-ring: #6FC2AC;
  --color-new: #F2B632;
  --color-on-new: #26221D;
  --color-new-edge: #F2B632;
  --color-scrim: rgb(0 0 0 / 0.66);
  --color-ask-new-text: #F2B632;
  --color-ask-new-bg: transparent;
  --color-ask-upcoming-text: #6FC2AC;
  --color-success: #7FCB9B;
  --color-success-bg: #1F3A2A;
  --color-warning: #F2B632;
  --color-warning-bg: #3A2D10;
  --color-error: #F2A097;
  --color-error-bg: #41201C;
  --color-info: #8DB7E8;
  --color-info-bg: #1F2D3A;
  --color-amount-in: #7FCB9B;
  --color-amount-out: #F2A097;
  --color-module-messages: #86B8E3;
  --color-module-messages-bg: #1F2D3A;
  --color-module-events: #D8A0CC;
  --color-module-events-bg: #3A2536;
  --color-module-cash: #E3B96A;
  --color-module-cash-bg: #3A3020;
  --color-module-documents: #A9B6C4;
  --color-module-documents-bg: #2B3138;
  --color-module-consent: #7FD0CE;
  --color-module-consent-bg: #1F3A39;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 0 0 1px #4A433A;
}
