/* Portal skin in the approved dark design: ink field, condensed headings,
   red accents, quiet cards. Scoped to the app shell only. */
:root {
  --ink: #111111;
  --paper: #111111;
  --paper-2: #1a1a1a;
  --card: #161616;
  --line: #2a2a2a;
  --red: #d7141a;
  --sand: #c9a24a;
  --font-display: "Barlow Condensed", "Archivo", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Inter", system-ui, sans-serif;
}
html, body { background: #111 !important; color: #f3eee7 !important; font-family: var(--font-body) !important; }
h1, h2, h3, .display { font-family: var(--font-display) !important; text-transform: uppercase; letter-spacing: 0.01em; }
.header, .site-header, header { background: #111 !important; border-bottom: 1px solid #2a2a2a !important; }
header a, nav a, .site-nav a { color: #f3eee7 !important; }
header a:hover, nav a:hover { color: var(--red) !important; }
.card, .panel, .stat, .profile-hero, .table, .surface {
  background: #161616 !important;
  border: 1px solid #2a2a2a !important;
  color: #f3eee7 !important;
  border-radius: 14px !important;
}
.card h1, .card h2, .card h3, .card .value, .card b { color: #f3eee7 !important; }
.muted, .small.muted, .tiny.muted { color: #9a938a !important; }
.btn-primary, .btn.btn-primary, a.btn-primary, .btn-clay {
  background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; border-radius: 999px !important;
}
table th { color: #9a938a !important; }
table td, table th { border-color: #2a2a2a !important; }
input, select, textarea { background: #1a1a1a !important; color: #f3eee7 !important; border-color: #2a2a2a !important; }
.pill, .badge { background: #222 !important; color: #f3eee7 !important; }

/* contrast fixes: the dark skin must keep text readable on every element */
.skip,
a.skip,
.skip-link {
  background: var(--red) !important;
  color: #fff !important;
}
.site-nav a.active,
nav a.active,
.nav a.active,
a.active {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 4px 10px;
}
.btn:not(.btn-primary),
button.btn:not(.btn-primary),
a.btn:not(.btn-primary),
.btn-sm {
  background: #1a1a1a !important;
  color: #f3eee7 !important;
  border-color: #3a3a3a !important;
}
.btn:hover:not(.btn-primary) {
  border-color: var(--red) !important;
  color: #fff !important;
}
.muted,
.small.muted,
.tiny.muted,
.kicker,
.label,
.note,
small {
  color: #d8d0c4 !important;
}
td,
th,
p,
li,
label,
h1,
h2,
h3,
b,
strong {
  color: inherit;
}

/* light theme restore: the dark skin must not leak into the light palette */
:root[data-theme="light"] body,
:root[data-theme="light"] html {
  background: #f3eee7 !important;
  color: #12100e !important;
}
:root[data-theme="light"] .header,
:root[data-theme="light"] .site-header,
:root[data-theme="light"] header {
  background: #fffdf9 !important;
  border-bottom: 1px solid #ded4bf !important;
}
:root[data-theme="light"] header a,
:root[data-theme="light"] nav a,
:root[data-theme="light"] .site-nav a {
  color: #12100e !important;
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .table,
:root[data-theme="light"] .surface,
:root[data-theme="light"] .profile-hero {
  background: #fffdf9 !important;
  color: #12100e !important;
  border: 1px solid #ded4bf !important;
}
:root[data-theme="light"] .card h1,
:root[data-theme="light"] .card h2,
:root[data-theme="light"] .card h3,
:root[data-theme="light"] .card b,
:root[data-theme="light"] .card .value,
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3 {
  color: #12100e !important;
}
:root[data-theme="light"] .muted,
:root[data-theme="light"] .small.muted,
:root[data-theme="light"] .tiny.muted,
:root[data-theme="light"] .kicker,
:root[data-theme="light"] .label,
:root[data-theme="light"] .note,
:root[data-theme="light"] small,
:root[data-theme="light"] td,
:root[data-theme="light"] th,
:root[data-theme="light"] p,
:root[data-theme="light"] li,
:root[data-theme="light"] label {
  color: #3a342c !important;
}
:root[data-theme="light"] .btn:not(.btn-primary),
:root[data-theme="light"] button.btn:not(.btn-primary),
:root[data-theme="light"] a.btn:not(.btn-primary),
:root[data-theme="light"] .btn-sm {
  background: #fff !important;
  color: #12100e !important;
  border-color: #c9bda6 !important;
}
:root[data-theme="light"] .site-nav a.active,
:root[data-theme="light"] nav a.active,
:root[data-theme="light"] .nav a.active,
:root[data-theme="light"] a.active {
  background: var(--red) !important;
  color: #fff !important;
}
:root[data-theme="light"] .skip,
:root[data-theme="light"] .skip-link {
  background: var(--red) !important;
  color: #fff !important;
}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: #fff !important;
  color: #12100e !important;
  border-color: #c9bda6 !important;
}

/* light profile fix: the big number and scale labels must be dark on light */
:root[data-theme="light"] .profile-hero .mono,
:root[data-theme="light"] .profile-hero .mono[style],
:root[data-theme="light"] .profile-hero .rating-number,
:root[data-theme="light"] .profile-hero .rating-card-value,
:root[data-theme="light"] .profile-hero .team-rating .mono,
:root[data-theme="light"] .profile-hero .scale-labels,
:root[data-theme="light"] .profile-hero .scale-labels span,
:root[data-theme="light"] .profile-hero .scale-empty {
  color: #12100e !important;
}
:root[data-theme="light"] .profile-hero .scale-dot {
  background: var(--red) !important;
  border-color: #fff !important;
}

/* small link contrast (breadcrumbs, secondary links, match results) */
:root[data-theme="dark"] .crumb,
:root[data-theme="dark"] .crumb a,
:root[data-theme="dark"] a.small,
:root[data-theme="dark"] .link,
:root[data-theme="dark"] .match-result.is-win,
:root[data-theme="dark"] .match-delta.is-up {
  color: #d8d0c4 !important;
}
:root[data-theme="light"] .crumb,
:root[data-theme="light"] .crumb a,
:root[data-theme="light"] a.small,
:root[data-theme="light"] .link,
:root[data-theme="light"] .match-result.is-win,
:root[data-theme="light"] .match-delta.is-up {
  color: #1e5c34 !important;
}

/* small link contrast v2: secondary links and map labels */
:root[data-theme="dark"] .small a,
:root[data-theme="dark"] .muted a,
:root[data-theme="dark"] .card a.small,
:root[data-theme="dark"] .link,
:root[data-theme="dark"] td a,
:root[data-theme="dark"] .map text,
:root[data-theme="dark"] svg text {
  color: #d8d0c4 !important;
  fill: #d8d0c4 !important;
}
:root[data-theme="light"] .small a,
:root[data-theme="light"] .muted a,
:root[data-theme="light"] .card a.small,
:root[data-theme="light"] .link,
:root[data-theme="light"] td a,
:root[data-theme="light"] .map text,
:root[data-theme="light"] svg text {
  color: #1f5c34 !important;
  fill: #1f5c34 !important;
}

/* hero light contrast: keep the dark hero and its light ink in light mode */
:root[data-theme="light"] .hero {
  background-color: #10222B !important;
  color: #f3eee7 !important;
}
:root[data-theme="light"] .hero h1,
:root[data-theme="light"] .hero p,
:root[data-theme="light"] .hero .kicker,
:root[data-theme="light"] .hero .tiny,
:root[data-theme="light"] .hero .muted,
:root[data-theme="light"] .hero .tab {
  color: #f3eee7 !important;
}
:root[data-theme="light"] .hero .tab {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.35) !important;
}
:root[data-theme="light"] .hero .tab.active {
  background: #f3eee7 !important;
  color: #111111 !important;
}