/**
 * Valor platform — design tokens + base typography.
 * Load after Inter (linked from player_nav_head.html) on player-facing pages.
 * Admin and auth pages should also link this file for consistent colors/type.
 */
:root {
  color-scheme: dark;
  --valor-bg: #0f1117;
  --valor-bg-page: #0f1117;
  --valor-bg-elevated: #0d1117;
  --valor-bg-deep: #0a0e14;
  --valor-card: #1a1d27;
  --valor-card-nested: #111723;
  --valor-panel: #0f1624;
  --valor-border: #2d3748;
  --valor-border-soft: #2a2d3a;
  --valor-border-nav: #2f3546;
  --valor-text: #e2e8f0;
  --valor-text-bright: #e8eaf0;
  --valor-muted: #718096;
  --valor-muted-mid: #a0aec0;
  --valor-subtle: #4a5568;
  --valor-blue: #63b3ed;
  --valor-blue-bright: #90cdf4;
  --valor-blue-link: #4299e1;
  --valor-green: #68d391;
  --valor-red: #fc8181;
  --valor-yellow: #f6e05e;
  --valor-orange: #f6ad55;
  --valor-purple: #b794f4;
  --valor-radius: 12px;
  --valor-radius-sm: 10px;
  --valor-radius-pill: 999px;
  --valor-gap: 14px;
  --valor-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Legacy names (pregame / jac inline :root consumers) */
  --bg: var(--valor-bg);
  --card: var(--valor-card);
  --border: var(--valor-border-soft);
  --blue: var(--valor-blue);
  --green: var(--valor-green);
  --red: var(--valor-red);
  --yellow: var(--valor-yellow);
  --orange: var(--valor-orange);
  --text: var(--valor-text);
  --muted: var(--valor-muted);
  --radius: var(--valor-radius);
  --gap: var(--valor-gap);

  /* BatMetric design system v2 (Recap + future surfaces). Legacy --bg/--text above unchanged. */
  --bm-bg: #050608;
  --bm-surface-0: #0c0e12;
  --bm-surface-1: #11141a;
  --bm-surface-2: #191d25;
  --bm-ink: #f5f7fa;
  --bm-ink-2: #aab2bf;
  --bm-ink-3: #6a7280;
  --bm-ink-4: #414855;
  --bm-accent: #3d8bff;
  --bm-accent-bright: #5fa3ff;
  --bm-accent-deep: #1f5fbf;
  --bm-accent-soft: rgba(61, 139, 255, 0.13);
  --bm-accent-line: rgba(56, 138, 237, 0.14);
  --bm-accent-line-2: rgba(56, 138, 237, 0.3);
  --bm-good: #5fcf95;
  --bm-bad: #f0716a;
  --bm-line-cool: rgba(255, 255, 255, 0.07);
  --bm-grade-a-fill: #3ddc97;
  --bm-grade-a-edge: #1f9e68;
  --bm-grade-a-ink: #04140c;
  --bm-grade-b-fill: #34c98a;
  --bm-grade-b-edge: #1d9866;
  --bm-grade-b-ink: #04140c;
  --bm-grade-c-fill: #f5b62b;
  --bm-grade-c-edge: #c08a10;
  --bm-grade-c-ink: #1a1300;
  --bm-grade-d-fill: #f0716a;
  --bm-grade-d-edge: #bf3f38;
  --bm-grade-d-ink: #ffffff;
  --bm-grade-f-fill: #f0514a;
  --bm-grade-f-edge: #b32a24;
  --bm-grade-f-ink: #ffffff;
  --bm-grade-u-fill: #191d25;
  --bm-grade-u-edge: #414855;
  --bm-grade-u-ink: #f5f7fa;
  --bm-font-display: "Oswald", "Inter", sans-serif;
  --bm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bm-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  /* Solid fallback first: if a custom property fails, avoid white flash on mobile. */
  background-color: #0f1117;
  background-color: var(--valor-bg-page);
  min-height: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background-color: #0f1117;
  background-color: var(--valor-bg-page);
  color: #e2e8f0;
  color: var(--valor-text);
  font-family: var(--valor-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  /* Fill dynamic viewport on mobile (reduces white gaps when 100vh != visible viewport). */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

.valor-section-title,
.section-title {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--valor-muted);
  margin-bottom: 8px;
  font-weight: 600;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}