/* BracketHQ dual theme – the Dark values are copied exactly from the supplied
   BracketHQ Dark Gaming Theme Starter. This is the only palette declaration.
   The original one-page app consumes the aliases at the end of each theme. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Poppins:wght@400;600;700&display=swap');

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --color-background: #F7F8FC;
  --color-surface: #FFFFFF;
  --color-surface-secondary: #FFFFFF;
  --color-text-primary: #171827;
  --color-text-secondary: #606579;
  --color-border: #E3E6EF;
  --color-accent: #65D83F;
  --color-accent-secondary: #009B66;
  --color-hover: #EEF1F8;
  --color-selected: #E7F5E4;
  --color-on-accent: #0D0F0E;
  --color-focus-ring: #267E30;
  --color-disabled-text: #757B8D;
  --color-disabled-bg: #EEF1F8;
  --color-success: #087F63;
  --color-success-bg: #E7F8F1;
  --color-warning: #83570F;
  --color-warning-bg: #FFF6E5;
  --color-error: #B4233A;
  --color-error-bg: #FFF0F2;
  --color-accent-text: #266D20; /* readable text variant of the supplied neon accent */
  --color-danger-border: #E5AAB4;
  --color-auth-panel: #E9F6E6;
  --color-backdrop: rgba(15,24,45,.58);
  --shadow-panel: 0 8px 28px rgba(30,45,80,.045);
  --shadow-dialog: 0 24px 90px rgba(17,24,39,.20);
  --shadow-toast: 0 12px 34px rgba(16,24,40,.18);
  --glow-accent-subtle: 0 0 14px rgba(101,216,63,.18);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Exact supplied Dark Gaming Theme palette and interaction state tokens. */
  --color-background: #0D0F0E;
  --color-surface: #1B211E;
  --color-surface-secondary: #1B211E;
  --color-text-primary: #F5F7F5;
  --color-text-secondary: #A5ADA7;
  --color-border: #29332C;
  --color-accent: #65D83F;
  --color-accent-secondary: #009B66;
  --color-hover: #263829;
  --color-selected: #263829;
  --color-on-accent: #0D0F0E;
  --color-focus-ring: #65D83F;
  --color-disabled-text: #78827A;
  --color-disabled-bg: #202723;
  --color-accent-text: #65D83F;
  --color-success: #65D83F;
  --color-success-bg: #263829;
  --color-warning: #F3C776;
  --color-warning-bg: #382F20;
  --color-error: #FF9AA5;
  --color-error-bg: #382427;
  --color-danger-border: #6A3940;
  --color-auth-panel: #1B211E;
  --color-backdrop: rgba(0,0,0,.70);
  --shadow-panel: 0 8px 28px rgba(0,0,0,.12);
  --shadow-dialog: 0 24px 90px rgba(0,0,0,.48);
  --shadow-toast: 0 12px 34px rgba(0,0,0,.42);
  --glow-accent-subtle: 0 0 14px rgba(101,216,63,.18);
}

:root {
  --font-display: 'Anton', 'Bebas Neue', Impact, sans-serif;
  --font-heading: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Poppins', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-body: 1.6;
  --line-height-heading: 1.2;
  --letter-spacing-display: .02em;
  --letter-spacing-body: 0;
  /* Original Dark Gaming Theme semantic names retained for compatibility. */
  --color-bg-primary: var(--color-background);
  --color-bg-secondary: var(--color-surface);
  --color-accent-primary: var(--color-accent);
  /* Backward-compatible BracketHQ component aliases. */
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --surface2: var(--color-hover);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border);
  --primary: var(--color-accent);
  --primary-dark: var(--color-accent-secondary);
  --primary-text: var(--color-accent-text);
  --primary-pale: var(--color-selected);
  --on-accent: var(--color-on-accent);
  --green: var(--color-success);
  --green-bg: var(--color-success-bg);
  --amber: var(--color-warning);
  --amber-bg: var(--color-warning-bg);
  --red: var(--color-error);
  --red-bg: var(--color-error-bg);
  --shadow: var(--shadow-panel);
}

html, body { background: var(--color-background); color: var(--color-text-primary); }
html { font-family: var(--font-body); }
body { font-family: var(--font-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); }
button, input, select, textarea { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-heading); }
.page-heading h1, .auth-art h1, .public-hero h1, .tour-card h3,
.detail-hero h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--letter-spacing-display); }
.page-heading h1 { font-size: clamp(26px, 2.5vw, 36px); letter-spacing: var(--letter-spacing-display); }
.tour-card h3 { font-size: clamp(18px, 1.6vw, 22px); }
.page-heading h1, .public-hero h1, .tour-card h3, .detail-hero h1 { overflow-wrap: anywhere; }
.score, .bracket-title, .fixture-heading, .bracket-match strong,
.metric-box strong { font-family: var(--font-heading); font-weight: 400; letter-spacing: .025em; }
.score { font-size: 21px; }
.detail-meta svg { width: 13px; height: 13px; }
.bracket-title { font-size: 17px; }
.metric-box strong { font-size: 25px; }
.stat-value, .top-title, .brand, .card-head h2, .section-title { font-family: var(--font-body); }
::selection { background: var(--color-selected); color: var(--color-text-primary); }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.top-search input:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }
.field input::placeholder, .top-search input::placeholder, textarea::placeholder { color: var(--color-text-secondary); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-text); opacity: 1; }
button:disabled { color: var(--color-disabled-text); }

/* Existing BracketHQ components inherit semantic roles without changing layout. */
.brand-mark, .btn.primary, .nav .nav-create { color: var(--on-accent); }
.nav .nav-create { color: var(--on-accent)!important; }
.nav a:hover, .nav a.active, .table-link, .eyebrow,
.auth-link, .public-filters a, .optional-details summary,
.tab.active, .step.active { color: var(--primary-text); }
.btn.primary:hover, .nav .nav-create:hover { background: var(--primary-dark); color: var(--on-accent); }
.btn.danger { border-color: var(--color-danger-border); }
.avatar { background: var(--primary-pale); color: var(--primary-text); }
.modal-backdrop { background: var(--color-backdrop); }
.modal { box-shadow: var(--shadow-dialog); }
.toast { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-toast); }
.toast.error { background: var(--red-bg); color: var(--red); border-color: var(--color-danger-border); }
.mobile-scrim.active { background: var(--color-backdrop); }
.auth-art { background: var(--color-auth-panel); color: var(--ink); border-right: 1px solid var(--line); }
.auth-art p { color: var(--muted); }
.auth-art .brand { color: var(--ink)!important; }
.auth-art .brand-mark { background: var(--primary)!important; color: var(--on-accent)!important; }
.badge.green { color: var(--green); background: var(--green-bg); }
.badge.red { color: var(--red); background: var(--red-bg); }
.badge.amber { color: var(--amber); background: var(--amber-bg); }
.badge.blue { color: var(--primary-text); background: var(--primary-pale); }
.bracket-match .won, .bracket-match button.won { border-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success); }
.bracket-match .won strong, .bracket-match button.won strong { color: inherit; }
tr:focus-within { background: var(--surface2); }
fieldset { border-color: var(--line); }
select { accent-color: var(--color-accent-secondary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent-secondary); }
.theme-toggle { width: 38px; height: 38px; padding: 9px; color: var(--primary-text); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.theme-toggle:hover { background: var(--surface2); color: var(--color-accent-secondary); }
.theme-toggle:active { background: var(--primary-pale); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.public-top { gap: 12px; }
.public-theme-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 930px) {
  .top-actions { gap: 8px; }
}
@media (max-width: 650px) {
  .page-heading h1 { font-size: clamp(23px, 6vw, 28px); }
  .public-top { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .nav a { transition: none; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }