:root{
  --jc-ground: #F4F1EA;
  --jc-surface: #FFFDF9;
  --jc-surface-2: #FFFFFF;
  --jc-ink: #1D1B18;
  --jc-ink2: #5C574F;
  --jc-ink3: #8E877A;
  --jc-hairline: #E4DFD6;
  --jc-outline: #D6CFC2;
  --jc-primary: #2F4BD6;
  --jc-primary-hover: #2742C4;
  --jc-primary-soft: #E6EAFB;
  --jc-primary-soft-text: #2337A8;
  --jc-live: #3F6B4F;
  --jc-live-pill: #E9F0EA;
  --jc-live-pill-text: #2F5A3E;
  --jc-pending-bg: #FBEFD9;
  --jc-pending-text: #6E430A;
  --jc-pending-box: #FBF4E6;
  --jc-waitlisted-bg: #EEE9FB;
  --jc-waitlisted-text: #4B3699;
  --jc-violet-bg: #EFEAF8;
  --jc-violet-text: #4A3291;
  --jc-danger: #B42318;
  --jc-danger-bg: #FCE8E6;
  --jc-moon: #F2A541;
  --jc-dark-ground: #1D1B18;
  --jc-dark-surface: #2A2723;
  --jc-dark-ink: #FFFDF9;
  --jc-dark-ink2: #B9B2A6;
  --jc-logo-lens: #2D3137;
  --jc-logo-dark-planet: #5C78F0;
  --jc-logo-dark-lens: #FFF0D6;
  --jc-circle-concerts: #5B3FB0;
  --jc-circle-edm: #0E7C86;
  --jc-circle-hanhi: #B23A6B;
  --jc-circle-musicians: #A45A12;
  --jc-circle-jazz: #2C6E7A;
  --jc-circle-vinyl: #6B5B12;
  --jc-circle-running: #0E7A5A;
  --jc-circle-founders: #C2410C;
  --jc-radius-sm: 12px;
  --jc-radius-md: 16px;
  --jc-radius-lg: 20px;
  --jc-radius-sheet: 28px;
  --jc-radius-pill: 999px;
  --jc-font-sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --jc-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --jc-font-serif: 'Instrument Serif', Georgia, serif;
  --jc-shadow-card: 0 1px 2px rgba(40,30,20,.06), 0 8px 24px rgba(40,30,20,.08);
  --jc-shadow-flat: 0 1px 2px rgba(40,30,20,.06);
  --jc-shadow-pop: 0 1px 2px rgba(40,30,20,.06), 0 8px 24px rgba(40,30,20,.08), 0 24px 60px rgba(40,30,20,.14);
  --jc-scrim: rgba(29,27,24,.35);
  --jc-hero: #2A1F3D;
}
/* Dark scheme (design-system.md "dark ground"): calls, entry pass and splash surfaces, and the whole app
   when the OS asks for it. data-theme="light" on <html> forces the light tokens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jc-ground: #1D1B18;
    --jc-surface: #2A2723;
    --jc-surface-2: #332F2A;
    --jc-ink: #FFFDF9;
    --jc-ink2: #B9B2A6;
    --jc-ink3: #8E877A;
    --jc-hairline: #3B3731;
    --jc-outline: #4A453E;
    --jc-primary: #5C78F0;
    --jc-primary-hover: #7088F2;
    --jc-primary-soft: #26338A;
    --jc-primary-soft-text: #C9D3FF;
    --jc-live: #7BD389;
    --jc-live-pill: #22362A;
    --jc-live-pill-text: #B9E4C1;
    --jc-pending-bg: #4A3410;
    --jc-pending-text: #F5D9A6;
    --jc-pending-box: #3A2C14;
    --jc-waitlisted-bg: #2F2552;
    --jc-waitlisted-text: #CFC3F7;
    --jc-violet-bg: #2F2552;
    --jc-violet-text: #CFC3F7;
    --jc-danger: #F08A80;
    --jc-danger-bg: #4A1F1A;
    --jc-logo-lens: #FFF0D6;
    --jc-shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --jc-shadow-flat: 0 1px 2px rgba(0,0,0,.3);
    --jc-shadow-pop: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
    --jc-scrim: rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --jc-ground: #1D1B18; --jc-surface: #2A2723; --jc-surface-2: #332F2A; --jc-ink: #FFFDF9; --jc-ink2: #B9B2A6; --jc-ink3: #8E877A;
  --jc-hairline: #3B3731; --jc-outline: #4A453E; --jc-primary: #5C78F0; --jc-primary-hover: #7088F2; --jc-primary-soft: #26338A; --jc-primary-soft-text: #C9D3FF;
  --jc-live: #7BD389; --jc-live-pill: #22362A; --jc-live-pill-text: #B9E4C1; --jc-pending-bg: #4A3410; --jc-pending-text: #F5D9A6; --jc-pending-box: #3A2C14;
  --jc-waitlisted-bg: #2F2552; --jc-waitlisted-text: #CFC3F7; --jc-violet-bg: #2F2552; --jc-violet-text: #CFC3F7; --jc-danger: #F08A80; --jc-danger-bg: #4A1F1A; --jc-logo-lens: #FFF0D6;
  --jc-shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); --jc-shadow-flat: 0 1px 2px rgba(0,0,0,.3); --jc-scrim: rgba(0,0,0,.55); color-scheme: dark;
}