/* ERZEUGT von tools/tokens-bauen.mjs aus tools/tokens.json – nicht von Hand ändern. */
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-200-900-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-200-900-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-400-700-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-400-700-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --surface: #f6f6fb;
  --surface-raised: #ffffff;
  --surface-sunken: #ecedf6;
  --surface-overlay: #ffffff;
  --surface-hover: #eeeef7;
  --border: #dcdcea;
  --border-strong: #7f7fa2;
  --ink: #15132b;
  --ink-muted: #56537a;
  --ink-subtle: #67648c;
  --on-brand: #ffffff;
  --brand: #5238db;
  --brand-strong: #3d29a8;
  --brand-line: #5238db;
  --brand-soft: #e9e6fc;
  --brand-ink: #4b35c9;
  --focus-ring: #3d29a8;
  --selection: #e9e6fc;
  --warn: #f0a020;
  --on-warn: #2b1c00;
  --warn-ink: #8a5200;
  --warn-soft: #fdf0d8;
  --success: #0b7058;
  --success-soft: #dcf2ea;
  --on-success: #ffffff;
  --danger: #c4283c;
  --danger-soft: #fce9eb;
  --on-danger: #ffffff;
  --seat-fill: #ffffff;
  --seat-empty: #eeeef7;
  --table-plate: #dcdcea;
  --board: #2a2841;
  --board-ink: #f2f1fa;
  --grid-line: #dfe0ee;
  --scrim: #15132baa;
  --shadow-sm: 0 1px 2px 0 #15132b14, 0 2px 6px -2px #15132b14;
  --shadow-md: 0 4px 12px -2px #15132b1f, 0 2px 4px -2px #15132b14;
  --shadow-lg: 0 16px 40px -8px #15132b26, 0 4px 12px -4px #15132b1a;
  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 68px;
  --space-72: 288px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --opacity-disabled: 0.45;
  --opacity-dragging: 0.6;
  --opacity-overlay: 0.6;
  --stroke-hairline: 1px;
  --stroke-icon: 1.5px;
  --stroke-mark: 2px;
  --stroke-state: 2px;
  --duration-fast: 120ms;
  --duration-mid: 180ms;
  --duration-move: 220ms;
  --duration-page: 420ms;
  --easing-out: cubic-bezier(.2,.7,.3,1);
  --easing-hinein: cubic-bezier(.32,0,.67,0);
  --font-display: "Unbounded", "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --display-xl-size: 40px;
  --display-xl-line: 44px;
  --display-xl-weight: 600;
  --display-xl-spacing: -0.01em;
  --display-lg-size: 30px;
  --display-lg-line: 34px;
  --display-lg-weight: 600;
  --display-lg-spacing: -0.01em;
  --display-md-size: 22px;
  --display-md-line: 28px;
  --display-md-weight: 600;
  --display-md-spacing: -0.01em;
  --lead-size: 20px;
  --lead-line: 26px;
  --lead-weight: 400;
  --title-md-size: 17px;
  --title-md-line: 24px;
  --title-md-weight: 600;
  --body-size: 15px;
  --body-line: 23px;
  --body-weight: 400;
  --body-strong-size: 15px;
  --body-strong-line: 23px;
  --body-strong-weight: 600;
  --body-sm-size: 13px;
  --body-sm-line: 19px;
  --body-sm-weight: 400;
  --label-size: 13px;
  --label-line: 16px;
  --label-weight: 600;
  --label-spacing: 0.006em;
  --mono-sm-size: 13px;
  --mono-sm-line: 18px;
  --mono-sm-weight: 500;
  --mono-xs-size: 11px;
  --mono-xs-line: 14px;
  --mono-xs-weight: 500;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #131320;
    --surface-raised: #1c1c2e;
    --surface-sunken: #0d0d17;
    --surface-overlay: #24243a;
    --surface-hover: #23233a;
    --border: #32324e;
    --border-strong: #6b6b92;
    --ink: #f2f1fa;
    --ink-muted: #a5a2c4;
    --ink-subtle: #8b88ad;
    --on-brand: #ffffff;
    --brand: #6a52f0;
    --brand-strong: #5a42e0;
    --brand-line: #7f6cff;
    --brand-soft: #2a2352;
    --brand-ink: #a294ff;
    --focus-ring: #a294ff;
    --selection: #2a2352;
    --warn: #f5b73f;
    --on-warn: #2b1c00;
    --warn-ink: #f5c169;
    --warn-soft: #3a2a0c;
    --success: #3ecf9e;
    --success-soft: #10322a;
    --on-success: #06211a;
    --danger: #ff8b95;
    --danger-soft: #3a1a20;
    --on-danger: #2b0a0f;
    --seat-fill: #2f2f4c;
    --seat-empty: #1e1e33;
    --table-plate: #3b3b5a;
    --board: #08080f;
    --board-ink: #d9d7ea;
    --grid-line: #262640;
    --scrim: #05050ccc;
    --shadow-sm: 0 1px 2px 0 #00000066, 0 2px 6px -2px #00000059;
    --shadow-md: 0 4px 14px -2px #00000080, 0 1px 3px 0 #00000059;
    --shadow-lg: 0 18px 44px -8px #00000099, 0 4px 12px -4px #00000073;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #131320;
  --surface-raised: #1c1c2e;
  --surface-sunken: #0d0d17;
  --surface-overlay: #24243a;
  --surface-hover: #23233a;
  --border: #32324e;
  --border-strong: #6b6b92;
  --ink: #f2f1fa;
  --ink-muted: #a5a2c4;
  --ink-subtle: #8b88ad;
  --on-brand: #ffffff;
  --brand: #6a52f0;
  --brand-strong: #5a42e0;
  --brand-line: #7f6cff;
  --brand-soft: #2a2352;
  --brand-ink: #a294ff;
  --focus-ring: #a294ff;
  --selection: #2a2352;
  --warn: #f5b73f;
  --on-warn: #2b1c00;
  --warn-ink: #f5c169;
  --warn-soft: #3a2a0c;
  --success: #3ecf9e;
  --success-soft: #10322a;
  --on-success: #06211a;
  --danger: #ff8b95;
  --danger-soft: #3a1a20;
  --on-danger: #2b0a0f;
  --seat-fill: #2f2f4c;
  --seat-empty: #1e1e33;
  --table-plate: #3b3b5a;
  --board: #08080f;
  --board-ink: #d9d7ea;
  --grid-line: #262640;
  --scrim: #05050ccc;
  --shadow-sm: 0 1px 2px 0 #00000066, 0 2px 6px -2px #00000059;
  --shadow-md: 0 4px 14px -2px #00000080, 0 1px 3px 0 #00000059;
  --shadow-lg: 0 18px 44px -8px #00000099, 0 4px 12px -4px #00000073;
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-mid: 0ms;
    --duration-move: 0ms;
    --duration-page: 0ms;
  }
}