/* ═══════════════════════════════════════════════════════════════════════
   TRYARENA THEMES

   Only tokens are overridden — no component styles live here. Every page
   already reads var(--v-600) and friends, so a theme is a palette swap
   rather than a second stylesheet to keep in sync.

   Applied as <html data-theme="pitch">. Six curated options rather than a
   colour picker: a venue that can pick its own hex will eventually
   produce grey-on-white and then wonder why staff misread the floor.
   ═══════════════════════════════════════════════════════════════════ */

/* ── PITCH · turf and outdoor ─────────────────────────────────────── */
[data-theme="pitch"] {
  --v-700:#14532d; --v-600:#15803d; --v-500:#22a355;
  --v-100:#dcfce7; --v-50:#f0fdf4;
  --s-app:#f7f8f5; --s-sunken:#eef1ec; --s-hover:#f2f7f2;
  --line:#e2e7de; --line-soft:#eef1ec; --line-hard:#d0d8ca;
  --busy-600:#15803d; --busy-100:#dcfce7;
}

/* ── COURT · pickleball, badminton, tennis ────────────────────────── */
[data-theme="court"] {
  --v-700:#0c4a6e; --v-600:#0369a1; --v-500:#0284c7;
  --v-100:#e0f2fe; --v-50:#f0f9ff;
  --s-app:#f5f8fa; --s-sunken:#eaeff3; --s-hover:#f0f6fa;
  --line:#dde5eb; --line-soft:#eaeff3; --line-hard:#c7d3dc;
  --busy-600:#0369a1; --busy-100:#e0f2fe;
  --warn-600:#c2410c; --warn-100:#ffedd5;   /* clay */
}

/* ── LANES · bowling and family entertainment ─────────────────────── */
[data-theme="lanes"] {
  --v-700:#92400e; --v-600:#b45309; --v-500:#d97706;
  --v-100:#fef3c7; --v-50:#fffbeb;
  --s-app:#faf8f4; --s-sunken:#f2ede4; --s-hover:#faf6ee;
  --line:#e8e1d5; --line-soft:#f2ede4; --line-hard:#d6cbb8;
  --busy-600:#b45309; --busy-100:#fef3c7;
  --info-600:#0e7490; --info-100:#cffafe;
}

/* ── ARCADE · gaming, dark ────────────────────────────────────────── */
/* Dark because lounges are dim and staff read these screens for hours. */
[data-theme="arcade"] {
  --s-app:#0b0912; --s-card:#141020; --s-sunken:#1c1730; --s-hover:#1f1a34;
  --s-inverse:#f4f2fa;
  --t-1:#f0edf8; --t-2:#c4bdd8; --t-3:#8b83a3; --t-4:#645d7a;
  --v-700:#c4b5fd; --v-600:#8b5cf6; --v-500:#a78bfa;
  --v-100:#2a1f4d; --v-50:#1c1533;
  --line:#241d3a; --line-soft:#1c1730; --line-hard:#332a52;
  --ok-600:#34d399;   --ok-100:#0d2a1e;
  --warn-600:#fbbf24; --warn-100:#2e2208;
  --bad-600:#f87171;  --bad-100:#341418;
  --info-600:#38bdf8; --info-100:#0c2a3a;
  --busy-600:#c4b5fd; --busy-100:#2a1f4d;
  --idle-600:#8b83a3; --idle-100:#1f1a30;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 10px rgba(0,0,0,.5);
  --sh-3:0 14px 38px rgba(0,0,0,.6);
}

/* ── BAIZE · snooker and pool, dark ───────────────────────────────── */
[data-theme="baize"] {
  --s-app:#0a1410; --s-card:#10201a; --s-sunken:#162c23; --s-hover:#193026;
  --s-inverse:#f0f6f2;
  --t-1:#eaf4ee; --t-2:#b6ccbf; --t-3:#7d9689; --t-4:#5a6f63;
  --v-700:#fcd34d; --v-600:#d4a017; --v-500:#eab308;   /* brass */
  --v-100:#2a2410; --v-50:#1c1a0d;
  --line:#1d3a2e; --line-soft:#162c23; --line-hard:#2a5142;
  --ok-600:#4ade80;   --ok-100:#0d2a1a;
  --warn-600:#fbbf24; --warn-100:#2e2208;
  --bad-600:#f87171;  --bad-100:#341418;
  --info-600:#38bdf8; --info-100:#0c2a3a;
  --busy-600:#fcd34d; --busy-100:#2a2410;
  --idle-600:#7d9689; --idle-100:#16261e;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 10px rgba(0,0,0,.5);
  --sh-3:0 14px 38px rgba(0,0,0,.6);
}

/* Dark themes need the browser told, so form controls and scrollbars stop
   rendering light against them. */
[data-theme="arcade"], [data-theme="baize"] { color-scheme: dark; }

/* The base sheet assumes a white card for inputs and buttons. */
[data-theme="arcade"] .input,  [data-theme="baize"] .input,
[data-theme="arcade"] .select, [data-theme="baize"] .select,
[data-theme="arcade"] textarea.input, [data-theme="baize"] textarea.input {
  background: var(--s-app); color: var(--t-1);
}
[data-theme="arcade"] .btn-default, [data-theme="baize"] .btn-default {
  background: var(--s-sunken);
}
[data-theme="arcade"] .btn-primary, [data-theme="baize"] .btn-primary,
[data-theme="arcade"] .switch-mark, [data-theme="baize"] .switch-mark,
[data-theme="arcade"] .chip.on,     [data-theme="baize"] .chip.on {
  color: #0b0912; font-weight: 700;
}
[data-theme="arcade"] .rc.over, [data-theme="baize"] .rc.over {
  background: var(--bad-100);
}
[data-theme="arcade"] .toast, [data-theme="baize"] .toast {
  background: var(--s-inverse); color: #16121f;
}