/* Erzeugt aus design/tokens.json mit make tokens (packages/ui/scripts/gen-tokens.ts). Nicht von Hand ändern. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../../../design/fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --type-display-size: 48px;
  --type-display-line: 52px;
  --type-display-weight: 600;
  --type-title-size: 28px;
  --type-title-line: 34px;
  --type-title-weight: 700;
  --type-heading-size: 20px;
  --type-heading-line: 25px;
  --type-heading-weight: 600;
  --type-body-size: 17px;
  --type-body-line: 25px;
  --type-body-weight: 400;
  --type-label-size: 15px;
  --type-label-line: 20px;
  --type-label-weight: 600;
  --type-small-size: 13px;
  --type-small-line: 18px;
  --type-small-weight: 400;
  --type-wordmark-size: 32px;
  --type-wordmark-line: 32px;
  --type-wordmark-weight: 800;
  --type-wordmark-tracking: -0.02em;
  --type-code-size: 13px;
  --type-code-line: 20px;
  --type-code-weight: 400;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  --size-control: 40px;
  --size-touch: 48px;
  --size-header: 52px;
  --size-icon: 20px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --blur-material: saturate(180%) blur(20px);
  --gradient-brand: linear-gradient(135deg, #00c6fe 0%, #0062fe 50%, #5624fd 100%);
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-alt: #e8e8ed;
  --line: #d2d2d7;
  --line-strong: #818186;
  --ink: #1d1d1f;
  --ink-muted: #666669;
  --brand: #0062fe;
  --brand-strong: #0050d4;
  --brand-soft: #e8efff;
  --on-brand: #ffffff;
  --link: #0052d9;
  --violet: #5624fd;
  --violet-soft: #efeaff;
  --cyan: #00c6fe;
  --success: #067066;
  --success-soft: #e0f5f0;
  --warning: #975700;
  --warning-soft: #fff2d9;
  --danger: #c8261b;
  --danger-soft: #fdebea;
  --material: #fbfbfdcc;
  --scrim: #00000066;
  --shadow-sm: 0 1px 2px #0000000a, 0 2px 8px #0000000d;
  --shadow-md: 0 1px 3px #0000000f, 0 8px 24px #00000017;
  --shadow-lg: 0 4px 12px #00000014, 0 24px 64px #00000029;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0062fe;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-alt: #2c2c2e;
    --line: #38383a;
    --line-strong: #7c7c80;
    --ink: #f5f5f7;
    --ink-muted: #98989d;
    --brand: #0062fe;
    --brand-strong: #1a6bff;
    --brand-soft: #16306b;
    --on-brand: #ffffff;
    --link: #7aacff;
    --violet: #a894ff;
    --violet-soft: #251b55;
    --cyan: #00c6fe;
    --success: #4fd6b8;
    --success-soft: #0d2e2a;
    --warning: #f5b849;
    --warning-soft: #35260a;
    --danger: #ff8b7f;
    --danger-soft: #3d1513;
    --material: #161617cc;
    --scrim: #00000099;
    --shadow-sm: 0 1px 2px #00000099;
    --shadow-md: 0 8px 24px #000000b3;
    --shadow-lg: 0 24px 64px #000000d9;
    --focus-ring: 0 0 0 2px #1c1c1e, 0 0 0 4px #7aacff;
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-alt: #2c2c2e;
  --line: #38383a;
  --line-strong: #7c7c80;
  --ink: #f5f5f7;
  --ink-muted: #98989d;
  --brand: #0062fe;
  --brand-strong: #1a6bff;
  --brand-soft: #16306b;
  --on-brand: #ffffff;
  --link: #7aacff;
  --violet: #a894ff;
  --violet-soft: #251b55;
  --cyan: #00c6fe;
  --success: #4fd6b8;
  --success-soft: #0d2e2a;
  --warning: #f5b849;
  --warning-soft: #35260a;
  --danger: #ff8b7f;
  --danger-soft: #3d1513;
  --material: #161617cc;
  --scrim: #00000099;
  --shadow-sm: 0 1px 2px #00000099;
  --shadow-md: 0 8px 24px #000000b3;
  --shadow-lg: 0 24px 64px #000000d9;
  --focus-ring: 0 0 0 2px #1c1c1e, 0 0 0 4px #7aacff;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-alt: #e8e8ed;
  --line: #d2d2d7;
  --line-strong: #818186;
  --ink: #1d1d1f;
  --ink-muted: #666669;
  --brand: #0062fe;
  --brand-strong: #0050d4;
  --brand-soft: #e8efff;
  --on-brand: #ffffff;
  --link: #0052d9;
  --violet: #5624fd;
  --violet-soft: #efeaff;
  --cyan: #00c6fe;
  --success: #067066;
  --success-soft: #e0f5f0;
  --warning: #975700;
  --warning-soft: #fff2d9;
  --danger: #c8261b;
  --danger-soft: #fdebea;
  --material: #fbfbfdcc;
  --scrim: #00000066;
  --shadow-sm: 0 1px 2px #0000000a, 0 2px 8px #0000000d;
  --shadow-md: 0 1px 3px #0000000f, 0 8px 24px #00000017;
  --shadow-lg: 0 4px 12px #00000014, 0 24px 64px #00000029;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0062fe;
  color-scheme: light;
}