/* Swibble Admin – Design-Tokens (Redesign 2026).
   Generiert aus docs/redesign-2026/design-system/tokens.json mit scripts/build-tokens.mjs – nicht von Hand bearbeiten.
   Hell ist Standard; Dunkel über [data-theme="dark"] oder – ohne gesetztes Theme – prefers-color-scheme. */
:root {
  color-scheme: light;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 600 34px/42px var(--font-sans);
  --tracking-display: -0.5px;
  --font-h1: 600 26px/34px var(--font-sans);
  --tracking-h1: -0.3px;
  --font-h2: 600 20px/28px var(--font-sans);
  --tracking-h2: normal;
  --font-h3: 600 16px/24px var(--font-sans);
  --tracking-h3: normal;
  --font-kpi: 600 30px/36px var(--font-sans);
  --tracking-kpi: -0.5px;
  --font-body: 400 14px/22px var(--font-sans);
  --tracking-body: normal;
  --font-body-medium: 500 14px/22px var(--font-sans);
  --tracking-body-medium: normal;
  --font-body-semibold: 600 14px/22px var(--font-sans);
  --tracking-body-semibold: normal;
  --font-small: 400 12px/18px var(--font-sans);
  --tracking-small: normal;
  --font-small-medium: 500 12px/18px var(--font-sans);
  --tracking-small-medium: normal;
  --font-small-semibold: 600 12px/18px var(--font-sans);
  --tracking-small-semibold: normal;
  --font-caption: 600 11px/16px var(--font-sans);
  --tracking-caption: 0.8px;
  --font-tiny: 500 10px/14px var(--font-sans);
  --tracking-tiny: normal;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-dialog: 16px;
  --radius-pill: 999px;
  --shadow-tab: 0 1px 2px rgba(15, 5, 31, 0.08);
  --shadow-toast: 0 12px 32px rgba(13, 5, 36, 0.28);
  --shadow-dialog: 0 16px 40px rgba(20, 5, 46, 0.18);
  --shadow-focus: 0 0 0 3px rgba(183, 24, 236, 0.28);
  --shadow-focus-input: 0 0 0 3px rgba(183, 24, 236, 0.18);
  --sidebar-width: 248px;
  --dialog-width: 520px;
  --toast-width: 400px;
  --mobile-statusbar: 54px;
  --mobile-tabbar: 83px;
  --input-font-size-touch: 16px;
  --shadow-card: 0 4px 16px rgba(0, 13, 54, 0.06);
  --bg-canvas: #f6f4f9;
  --bg-surface: #ffffff;
  --bg-surface-2: #f9f6fc;
  --bg-sidebar: #ffffff;
  --bg-sidebar-hover: #000d3612;
  --bg-overlay: #29124d;
  --bg-inverse: #000d36;
  --border-default: #e8e3ee;
  --border-strong: #cfc7da;
  --text-primary: #000d36;
  --text-secondary: #556987;
  --text-tertiary: #6c7688;
  --text-inverse: #ffffff;
  --text-on-sidebar: #3e4a63;
  --text-on-inverse: #ffffff;
  --text-brand: #b718ec;
  --brand-primary: #b718ec;
  --brand-primary-hover: #9014bb;
  --brand-soft: #f6e8fd;
  --brand-soft-text: #7c10a5;
  --brand-navy: #000d36;
  --swibbly-bg: #f3e1ff;
  --swibbly-border: #c63bf7;
  --swibbly-text: #2a1640;
  --status-success: #157b46;
  --status-success-soft: #e3f6eb;
  --status-warning: #9d6200;
  --status-warning-soft: #fff2d6;
  --status-danger: #b9324b;
  --status-danger-soft: #fde7ec;
  --status-info: #2667cc;
  --status-info-soft: #e6f0ff;
  --platform-tiktok: #000d36;
  --platform-instagram: #e1306c;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.28);
  --bg-canvas: #0b1030;
  --bg-surface: #141a3e;
  --bg-surface-2: #1b2250;
  --bg-sidebar: #0e1336;
  --bg-sidebar-hover: #ffffff14;
  --bg-overlay: #0d051f;
  --bg-inverse: #f4f2fa;
  --border-default: #262d58;
  --border-strong: #384076;
  --text-primary: #f4f2fa;
  --text-secondary: #a3abc9;
  --text-tertiary: #858daa;
  --text-inverse: #ffffff;
  --text-on-sidebar: #b9c0dc;
  --text-on-inverse: #0b1030;
  --text-brand: #e3a6fa;
  --brand-primary: #b718ec;
  --brand-primary-hover: #9e16cc;
  --brand-soft: #2c1743;
  --brand-soft-text: #e3a6fa;
  --brand-navy: #000d36;
  --swibbly-bg: #49265f;
  --swibbly-border: #df78ff;
  --swibbly-text: #ffffff;
  --status-success: #34c47a;
  --status-success-soft: #10331f;
  --status-warning: #f0b23a;
  --status-warning-soft: #3a2a05;
  --status-danger: #f0607a;
  --status-danger-soft: #3d1220;
  --status-info: #5b9bff;
  --status-info-soft: #10244a;
  --platform-tiktok: #ffffff;
  --platform-instagram: #f04c85;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.28);
    --bg-canvas: #0b1030;
    --bg-surface: #141a3e;
    --bg-surface-2: #1b2250;
    --bg-sidebar: #0e1336;
    --bg-sidebar-hover: #ffffff14;
    --bg-overlay: #0d051f;
    --bg-inverse: #f4f2fa;
    --border-default: #262d58;
    --border-strong: #384076;
    --text-primary: #f4f2fa;
    --text-secondary: #a3abc9;
    --text-tertiary: #858daa;
    --text-inverse: #ffffff;
    --text-on-sidebar: #b9c0dc;
    --text-on-inverse: #0b1030;
    --text-brand: #e3a6fa;
    --brand-primary: #b718ec;
    --brand-primary-hover: #9e16cc;
    --brand-soft: #2c1743;
    --brand-soft-text: #e3a6fa;
    --brand-navy: #000d36;
    --swibbly-bg: #49265f;
    --swibbly-border: #df78ff;
    --swibbly-text: #ffffff;
    --status-success: #34c47a;
    --status-success-soft: #10331f;
    --status-warning: #f0b23a;
    --status-warning-soft: #3a2a05;
    --status-danger: #f0607a;
    --status-danger-soft: #3d1220;
    --status-info: #5b9bff;
    --status-info-soft: #10244a;
    --platform-tiktok: #ffffff;
    --platform-instagram: #f04c85;
  }
}