/* Stagepass Design Tokens · v1 */
:root {
  --sp-bg: #FBF8F6;
  --sp-surface: #FFFFFF;
  --sp-ink: #17171B;
  --sp-muted: #6D6869;
  --sp-line: #ECE6E2;
  --sp-line-strong: #948B86;
  --sp-pass-top: #2C2C32;
  --sp-pass-bottom: #121215;
  --sp-pass-ink: #FBF8F6;
  --sp-live: #FF453A;
  --sp-live-2: #FF8A3D;
  --sp-live-soft: #FFC4A8;
  --sp-live-text: #C9302A;
  --sp-grad-text-from: #D92F25;
  --sp-grad-text-to: #C2410C;
  --sp-error: #C0265A;
  --sp-error-tint: #FBE9EF;
  --sp-warn: #8A5C00;
  --sp-focus: #17171B;
  --sp-on-ink: #FBF8F6;
  --sp-grad-text-dark: linear-gradient(90deg,#FF6A5E,#FFC4A8);
  --sp-grad-pass-dark: linear-gradient(180deg,#FFFFFF,#E2DEDA);
  /* Verläufe */
  --sp-grad-live: linear-gradient(90deg,#FF453A 0%,#FF8A3D 55%,#FFC4A8 100%);
  --sp-grad-light: linear-gradient(90deg,#FF453A,#FF8A3D);
  --sp-grad-pass-light: linear-gradient(180deg,#2C2C32,#121215);
  --sp-grad-text-light: linear-gradient(90deg,#D92F25,#C2410C);
  --sp-grad-text: var(--sp-grad-text-light);
  --sp-grad-pass: var(--sp-grad-pass-light);
  /* Typografie */
  --sp-font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --sp-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sp-text-xs: 12px;
  --sp-text-sm: 14px;
  --sp-text-base: 16px;
  --sp-text-md: 18px;
  --sp-text-lg: 22px;
  --sp-text-xl: 28px;
  --sp-text-2xl: 36px;
  --sp-text-3xl: 48px;
  --sp-text-4xl: 64px;
  --sp-text-5xl: 80px;
  --sp-weight-regular: 400;
  --sp-weight-medium: 500;
  --sp-weight-bold: 700;
  --sp-tracking-display: -0.035em;
  --sp-tracking-heading: -0.02em;
  --sp-tracking-body: 0;
  --sp-tracking-label: 0.12em;
  --sp-leading-tight: 1.04;
  --sp-leading-heading: 1.15;
  --sp-leading-body: 1.55;
  /* Bewegung */
  --sp-motion-loop: 4s;
  --sp-motion-light-on: 320ms;
  --sp-motion-light-on-ease: cubic-bezier(.3,1.4,.5,1);
  --sp-motion-light-off: 240ms;
  --sp-motion-light-off-ease: cubic-bezier(.4,0,1,1);
  --sp-motion-connect: 900ms;
  --sp-motion-connect-ease: cubic-bezier(.4,0,.2,1);
  --sp-motion-pulse: 2.4s;
  --sp-motion-flag-in: 280ms;
  --sp-motion-flag-in-ease: cubic-bezier(.2,.8,.2,1);
  /* Radien und Abstände */
  --sp-radius-sm: 6px;
  --sp-radius-md: 10px;
  --sp-radius-lg: 14px;
  --sp-radius-pill: 999px;
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 24px;
  --sp-space-6: 32px;
  --sp-space-7: 48px;
  --sp-space-8: 64px;
  --sp-space-9: 96px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
 :root:not([data-theme=light]) {
  --sp-bg: #0E0E10;
  --sp-surface: #18181C;
  --sp-ink: #F4F2F0;
  --sp-muted: #9C9799;
  --sp-line: #27272C;
  --sp-line-strong: #66666E;
  --sp-pass-top: #FFFFFF;
  --sp-pass-bottom: #E2DEDA;
  --sp-pass-ink: #0E0E10;
  --sp-live: #FF453A;
  --sp-live-2: #FF8A3D;
  --sp-live-soft: #FFC4A8;
  --sp-live-text: #FF6A5E;
  --sp-grad-text-from: #FF6A5E;
  --sp-grad-text-to: #FFC4A8;
  --sp-error: #FF6B93;
  --sp-error-tint: #2A1620;
  --sp-warn: #F2B53A;
  --sp-focus: #F4F2F0;
  --sp-on-ink: #0E0E10;
  --sp-grad-text: var(--sp-grad-text-dark);
  --sp-grad-pass: var(--sp-grad-pass-dark);
 }
}
:root[data-theme=dark] {
  --sp-bg: #0E0E10;
  --sp-surface: #18181C;
  --sp-ink: #F4F2F0;
  --sp-muted: #9C9799;
  --sp-line: #27272C;
  --sp-line-strong: #66666E;
  --sp-pass-top: #FFFFFF;
  --sp-pass-bottom: #E2DEDA;
  --sp-pass-ink: #0E0E10;
  --sp-live: #FF453A;
  --sp-live-2: #FF8A3D;
  --sp-live-soft: #FFC4A8;
  --sp-live-text: #FF6A5E;
  --sp-grad-text-from: #FF6A5E;
  --sp-grad-text-to: #FFC4A8;
  --sp-error: #FF6B93;
  --sp-error-tint: #2A1620;
  --sp-warn: #F2B53A;
  --sp-focus: #F4F2F0;
  --sp-on-ink: #0E0E10;
  --sp-grad-text: var(--sp-grad-text-dark);
  --sp-grad-pass: var(--sp-grad-pass-dark);
}
@media (prefers-reduced-motion: reduce) {
 :root { --sp-motion-loop: 0s; --sp-motion-pulse: 0s; --sp-motion-connect: 0s; }
}