@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@400;500;700;900&family=Cabin+Condensed:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root {
  /* ---------- Brand palette (zugvoegelfestival.org) ---------- */
  --black: #1e1f1c;
  --white: #f2f2f2;
  --oldwhite: #ededdf;
  --darkblue: #212e38;
  --aubergine: #200828;
  --cyan: #95cebd;
  --turquoise: #89eac9;
  --wick: #00c6c2;
  --ice: #61d7d7;
  --lightblue: #6fcae9;
  --aquablue: #43b4ff;
  --lightgreen: #86e7b2;
  --violett: #caa2ff;
  --flieder: #d3c0ff;
  --lightpurple: #cc85d6;
  --candy: #f37195;
  --pink: #e74f77;
  --medipink: #e84f77;
  --magenta: #d64d85;
  --peach: #fe938c;
  --apricote: #ffb89c;
  --orange: #f4bd73;
  --sunny: #ffef7b;
  --yellow: #e3e07d;
  --awarenessred: #ff0038;

  /* ---------- Semantic surfaces ---------- */
  --bg: #16222b;
  --bg-2: #1c2e3a;
  --bg-deep: #0d181f;
  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.1);
  --surface-strong: rgba(255, 255, 255, 0.14);
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* ---------- Text ---------- */
  --fg: #f4efff;
  --fg-soft: #d5cce0;
  --fg-dim: #9d8eb3;
  --fg-mute: #6b5d83;

  /* ---------- Accent ---------- */
  --accent: var(--cyan);
  --accent-2: var(--violett);
  --accent-warm: var(--orange);
  --danger: var(--awarenessred);
  --live: #ff3855;
  --ring: rgba(0, 198, 194, 0.55);

  /* ---------- Typography ---------- */
  --font-display: 'Anton', 'Barlow', system-ui, sans-serif;
  --font-menu: 'Barlow', system-ui, sans-serif;
  --font-list: 'Cabin Condensed', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;

  /* ---------- Spacing (4px grid) ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-7: 1.75rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-3: 0 22px 60px -12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-glow-accent: 0 0 32px -6px rgba(0, 198, 194, 0.55);
  --shadow-glow-stage: 0 0 28px -6px var(--stage-color, var(--accent));

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-4: 620ms;

  /* ---------- Time-grid ---------- */
  --px-per-min: 1.5;
  --px-per-hour: 90px;
  --lane-header-h: 48px;

  /* ---------- Safe-area shortcuts ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}