/* Erzeugt von tools/build_tokens.py aus replica/design/tokens*.json – nicht von Hand ändern. */
:root {
  color-scheme: light dark;
  --c-bg: #f4f5f7;
  --c-surface: #ffffff;
  --c-surface-2: #eceef2;
  --c-border: #dfe3e8;
  --c-border-input: #7b8592;
  --c-text: #161a20;
  --c-text-muted: #576170;
  --c-accent: #3446c2;
  --c-accent-hover: #2a3aa3;
  --c-accent-soft: #e7eafa;
  --c-on-accent: #ffffff;
  --c-on-accent-soft: #24318c;
  --c-focus: #3446c2;
  --c-danger: #b42b24;
  --c-success: #1b7340;
  --c-warning: #8a5300;
  --c-warning-soft: #fdf1d8;
  --c-reply-yes: #1b7340;
  --c-reply-yes-fill: #1c7d45;
  --c-reply-yes-soft: #e2f3e9;
  --c-reply-no: #b42b24;
  --c-reply-no-fill: #c2342b;
  --c-reply-no-soft: #fbe5e3;
  --c-reply-maybe: #8a5300;
  --c-reply-maybe-fill: #f0b43c;
  --c-reply-maybe-soft: #fdf1d8;
  --c-reply-none: #5f6876;
  --c-reply-none-fill: #c9ced6;
  --c-reply-none-soft: #eceef2;
  --c-on-fill: #ffffff;
  --c-on-fill-maybe: #2a1c00;
  --c-on-fill-none: #161a20;
  --c-scrim: #0b0d11;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --leading-xs: 1.33;
  --weight-xs: 500;
  --text-sm: 0.875rem;
  --leading-sm: 1.43;
  --weight-sm: 400;
  --text-base: 1rem;
  --leading-base: 1.5;
  --weight-base: 400;
  --text-lg: 1.125rem;
  --leading-lg: 1.44;
  --weight-lg: 600;
  --text-xl: 1.375rem;
  --leading-xl: 1.27;
  --weight-xl: 700;
  --text-2xl: 1.75rem;
  --leading-2xl: 1.21;
  --weight-2xl: 700;
  --space-0: 0rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
  --shadow-pop: 0 12px 32px rgba(16,24,40,.18);
  --shadow-fab: 0 6px 16px rgba(16,24,40,.22);
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --content-max: 760px;
  --wide-max: 1200px;
  --sidebar: 248px;
  --topbar: 56px;
  --tabbar: 64px;
  --tap-min: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0f1216;
    --c-surface: #171b21;
    --c-surface-2: #20252d;
    --c-border: #2c323b;
    --c-border-input: #7a8492;
    --c-text: #e8ecf1;
    --c-text-muted: #a2acb8;
    --c-accent: #8f9dff;
    --c-accent-hover: #a9b4ff;
    --c-accent-soft: #252c52;
    --c-on-accent: #0f1216;
    --c-on-accent-soft: #d6dbff;
    --c-focus: #8f9dff;
    --c-danger: #ff8077;
    --c-success: #57c785;
    --c-warning: #f2bb55;
    --c-warning-soft: #3a2c10;
    --c-reply-yes: #57c785;
    --c-reply-yes-fill: #2f9e5d;
    --c-reply-yes-soft: #15301f;
    --c-reply-no: #ff8077;
    --c-reply-no-fill: #e0574e;
    --c-reply-no-soft: #3a1a18;
    --c-reply-maybe: #f2bb55;
    --c-reply-maybe-fill: #f0b43c;
    --c-reply-maybe-soft: #3a2c10;
    --c-reply-none: #a2acb8;
    --c-reply-none-fill: #4a525e;
    --c-reply-none-soft: #20252d;
    --c-on-fill: #0b0d11;
    --c-on-fill-maybe: #2a1c00;
    --c-on-fill-none: #e8ecf1;
    --c-scrim: #000000;
    --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --c-bg: #0f1216;
  --c-surface: #171b21;
  --c-surface-2: #20252d;
  --c-border: #2c323b;
  --c-border-input: #7a8492;
  --c-text: #e8ecf1;
  --c-text-muted: #a2acb8;
  --c-accent: #8f9dff;
  --c-accent-hover: #a9b4ff;
  --c-accent-soft: #252c52;
  --c-on-accent: #0f1216;
  --c-on-accent-soft: #d6dbff;
  --c-focus: #8f9dff;
  --c-danger: #ff8077;
  --c-success: #57c785;
  --c-warning: #f2bb55;
  --c-warning-soft: #3a2c10;
  --c-reply-yes: #57c785;
  --c-reply-yes-fill: #2f9e5d;
  --c-reply-yes-soft: #15301f;
  --c-reply-no: #ff8077;
  --c-reply-no-fill: #e0574e;
  --c-reply-no-soft: #3a1a18;
  --c-reply-maybe: #f2bb55;
  --c-reply-maybe-fill: #f0b43c;
  --c-reply-maybe-soft: #3a2c10;
  --c-reply-none: #a2acb8;
  --c-reply-none-fill: #4a525e;
  --c-reply-none-soft: #20252d;
  --c-on-fill: #0b0d11;
  --c-on-fill-maybe: #2a1c00;
  --c-on-fill-none: #e8ecf1;
  --c-scrim: #000000;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Breakpoints (nicht als Variable nutzbar in @media): tablet 720px, desktop 1024px */