/* Rallio COACH design tokens for the Claude Design bundle.
   The coach UI (apps/trainer) styles itself with inline styles that reference
   these CSS custom properties (--bg, --surface, --ink, --accent, --sel, …),
   three font families, a few keyframes, and a small set of layout/utility
   classes (.arena-grid, .grid-*, .mscroll, .coach-*, .wmodal). This sheet
   supplies all of them so the coach primitives and page blocks render on-brand
   inside Claude Design.

   SOURCE OF TRUTH: apps/trainer/src/app/globals.css. Keep the :root / dark
   token values and the keyframes/classes below in sync when they change there.
   (The app gets its fonts from next/font and tokens from globals.css; here the
   fonts load via a remote @import and the tokens are inlined as literals.) */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* fonts — components reference 'Archivo' / 'Hanken Grotesk' / 'Space Mono'
     directly, and var(--font-*) is provided for the few that read it. */
  --font-archivo: 'Archivo';
  --font-hanken: 'Hanken Grotesk';
  --font-space-mono: 'Space Mono';
  --font-mono: 'Space Mono';

  /* Court Day (light) — warm cream palette */
  --bg: #FBF7F0;
  --surface: #FFFFFF;
  --surface-2: #F1ECE1;
  --ink: #15324B;
  --on-ink: #FFFFFF;
  --ink-soft: #4A5A68;
  --mute: #8C97A2;
  --accent: #FF5B35;
  --accent-strong: color-mix(in oklab, #FF5B35 82%, #2a1206);
  --accent-text: #FF5B35;
  --accent-wash: rgba(255,91,53,0.14);
  /* Selected/active control surface. Inverted ink in light; brand orange in
     dark (where inverted ink would read as a jarring white pill). */
  --sel: var(--ink);
  --on-sel: var(--on-ink);
  --line: rgba(21, 50, 75, 0.10);
  --line-2: rgba(21,50,75,0.16);
  --good: #1F8A5B;
  --good-text: #157048;
  --good-wash: rgba(31,138,91,0.14);
  --bad: #D6406A;
  --bad-text: #C0335A;
  --bad-wash: rgba(214,64,106,0.12);
  --warn: #E0A020;
  --warn-text: #B57A12;
  --warn-wash: rgba(242,180,65,0.16);
  --info: #7A5AE0;
  --info-text: #6A48D6;
  --info-wash: rgba(122,90,224,0.14);
  --shadow-color: rgba(21,50,75,0.16);
  color-scheme: light;
}

/* ── Court Night dark theme — applied on data-theme="dark" ───────── */
:root[data-theme="dark"] {
  --bg: #0D1B2A;
  --surface: #16293D;
  --surface-2: #213A52;
  --ink: #ECF2F8;
  --on-ink: #0D1B2A;
  --ink-soft: #AABACA;
  --mute: #7589A0;
  --accent: #FF5B35;
  --accent-strong: #FF6E4C;
  --accent-text: #FF8A66;
  --accent-wash: rgba(255,91,53,0.16);
  --sel: var(--accent);
  --on-sel: #fff;
  --line: rgba(255,255,255,0.10);
  --line-2: rgba(255,255,255,0.16);
  --good: #2FD58B;
  --good-text: #46E39B;
  --good-wash: rgba(47,213,139,0.15);
  --bad: #FF6B5E;
  --bad-text: #FF8478;
  --bad-wash: rgba(255,107,94,0.15);
  --warn: #F2B441;
  --warn-text: #F7C765;
  --warn-wash: rgba(242,180,65,0.15);
  --info: #9C8CF0;
  --info-text: #B6A9F6;
  --info-wash: rgba(156,140,240,0.16);
  --shadow-color: rgba(0,0,0,0.45);
  color-scheme: dark;
}

/* System dark when no explicit theme is chosen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0D1B2A;
    --surface: #16293D;
    --surface-2: #213A52;
    --ink: #ECF2F8;
    --on-ink: #0D1B2A;
    --ink-soft: #AABACA;
    --mute: #7589A0;
    --accent: #FF5B35;
    --accent-strong: #FF6E4C;
    --accent-text: #FF8A66;
    --accent-wash: rgba(255,91,53,0.16);
    --sel: var(--accent);
    --on-sel: #fff;
    --line: rgba(255,255,255,0.10);
    --line-2: rgba(255,255,255,0.16);
    --good: #2FD58B;
    --good-text: #46E39B;
    --good-wash: rgba(47,213,139,0.15);
    --bad: #FF6B5E;
    --bad-text: #FF8478;
    --bad-wash: rgba(255,107,94,0.15);
    --warn: #F2B441;
    --warn-text: #F7C765;
    --warn-wash: rgba(242,180,65,0.15);
    --info: #9C8CF0;
    --info-text: #B6A9F6;
    --info-wash: rgba(156,140,240,0.16);
    --shadow-color: rgba(0,0,0,0.45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-hanken), 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--ink);
}
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--ink) 16%, transparent);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* Keyframes the coach UI animates with (from globals.css). */
@keyframes wfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wpop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Horizontal scrollers (location pills, day strip) and dropdown lists hide
   their scrollbar. */
.mscroll { scrollbar-width: none; -ms-overflow-style: none; }
.mscroll::-webkit-scrollbar { display: none; }

/* Desktop schedule: every arena side by side, two per row. */
.arena-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }

/* Mobile menu bar (players-web style) — desktop hides it. */
.coach-mobile-topbar { display: none; }
@media (min-width: 769px) { .coach-mobile-drawer { display: none !important; } }

/* ── Mobile responsive (the grid-*/flex-* classes only override on phones;
   their desktop base layout comes from each block's inline style) ── */
@media (max-width: 768px) {
  .coach-header { display: none !important; }
  .coach-mobile-topbar {
    display: flex !important; align-items: center; gap: 10px; padding: 12px 16px;
    background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; flex-shrink: 0;
  }
  .coach-content { padding: 16px !important; }
  .grid-4col { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3col { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-2col-sidebar { grid-template-columns: 1fr !important; }
  .arena-grid { grid-template-columns: 1fr !important; }
  .sticky-sidebar { position: static !important; top: auto !important; }
  .profile-preview { order: -1; }
  .flex-booking { flex-direction: column !important; }
  .booking-detail { width: 100% !important; flex-shrink: 1 !important; position: static !important; }
}
@media (max-width: 400px) {
  .coach-content { padding: 12px !important; }
  .grid-4col, .grid-3col { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .wmodal { padding: 18px !important; border-radius: 18px !important; }
  .wmodal h2 { font-size: 19px !important; }
}

/* ── Theme-token keep-alive — DO NOT REMOVE.
   Tokens consumed only via inline style={{ var(--x) }} are invisible to the CSS
   optimizer (Lightning CSS); without a CSS-visible reference it tree-shakes the
   variable out and drops the dark-theme override with it. This never-applied
   sentinel references every token so they all survive. Add new tokens here. */
.theme-token-keepalive {
  background-image: linear-gradient(
    var(--bg), var(--surface), var(--surface-2), var(--ink), var(--on-ink),
    var(--ink-soft), var(--mute), var(--accent), var(--accent-strong),
    var(--accent-text), var(--accent-wash), var(--sel), var(--on-sel),
    var(--line), var(--line-2),
    var(--good), var(--good-text), var(--good-wash), var(--bad),
    var(--bad-text), var(--bad-wash), var(--warn), var(--warn-text),
    var(--warn-wash), var(--info), var(--info-text), var(--info-wash),
    var(--shadow-color)
  );
}