:root {
  --font-sans: "Poppins", system-ui, sans-serif;
  color-scheme: light;

  /* Light — blanc / orange */
  --color-bg-1: #faf8f5;
  --color-bg-2: #f3efe9;
  --color-bg-3: #ebe4db;
  --color-bg-radial: rgba(232, 93, 4, 0.1);
  --color-surface: #ffffff;
  --color-surface-2: #f0ebe4;
  --color-input-bg: #ffffff;
  --color-court: #c45c26;
  --color-court-line: #f5f0e8;
  --color-accent: #e85d04;
  --color-accent-soft: rgba(232, 93, 4, 0.14);
  --color-accent-border: rgba(232, 93, 4, 0.45);
  --color-on-accent: #ffffff;
  --color-text: #1c1917;
  --color-muted: #78716c;
  --color-border: rgba(28, 25, 23, 0.1);
  --color-border-strong: rgba(28, 25, 23, 0.2);
  --color-offense: #2563eb;
  --color-defense: #dc2626;
  --color-ball: #e85d04;
  --color-danger: #dc2626;
  --color-danger-soft: rgba(220, 38, 38, 0.12);
  --color-danger-text: #b91c1c;
  --color-on-danger: #ffffff;
  --color-ok: #16a34a;
  --color-ok-soft: rgba(22, 163, 74, 0.12);
  --color-ok-text: #15803d;
  --color-nav-bg: rgba(255, 255, 255, 0.94);
  --color-nav-border: rgba(28, 25, 23, 0.1);
  --color-overlay: rgba(28, 25, 23, 0.45);
  --color-shadow: rgba(28, 25, 23, 0.14);
  --color-modal-bg: #ffffff;

  /* aliases legacy */
  --color-bg: var(--color-bg-2);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Dark — noir / orange */
  --color-bg-1: #0a0a0a;
  --color-bg-2: #111111;
  --color-bg-3: #171717;
  --color-bg-radial: rgba(249, 115, 22, 0.12);
  --color-surface: #1a1a1a;
  --color-surface-2: #242424;
  --color-input-bg: #0f0f0f;
  --color-court: #c45c26;
  --color-court-line: #f5f0e8;
  --color-accent: #f97316;
  --color-accent-soft: rgba(249, 115, 22, 0.16);
  --color-accent-border: rgba(249, 115, 22, 0.5);
  --color-on-accent: #0a0a0a;
  --color-text: #fafaf9;
  --color-muted: #a8a29e;
  --color-border: rgba(250, 250, 249, 0.1);
  --color-border-strong: rgba(250, 250, 249, 0.22);
  --color-offense: #3b82f6;
  --color-defense: #ef4444;
  --color-ball: #f97316;
  --color-danger: #ef4444;
  --color-danger-soft: rgba(239, 68, 68, 0.18);
  --color-danger-text: #fca5a5;
  --color-on-danger: #ffffff;
  --color-ok: #22c55e;
  --color-ok-soft: rgba(34, 197, 94, 0.16);
  --color-ok-text: #86efac;
  --color-nav-bg: rgba(12, 12, 12, 0.94);
  --color-nav-border: rgba(250, 250, 249, 0.12);
  --color-overlay: rgba(0, 0, 0, 0.72);
  --color-shadow: rgba(0, 0, 0, 0.55);
  --color-modal-bg: #1a1a1a;
  --color-bg: var(--color-bg-2);
}

.btn-ghost {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 0;
  box-shadow: none;
}

.btn-ghost:hover {
  filter: brightness(0.96);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-on-danger);
  border: 0;
  box-shadow: none;
}

.btn-danger:hover {
  filter: brightness(1.05);
}

.flash-upgrade {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  color: var(--color-text);
  border: 1px solid var(--color-accent-border);
}
.flash-cta {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}
.flash-cta:hover { filter: brightness(1.08); }