/* ScoreFrame site look (2026-10-23): the app's light palette and type, shared by
   the information pages (features, support, privacy, terms, delete account,
   what's new). Loaded LAST in <head>, so it re-points each page's own colour
   variables instead of rewriting every page. The homepage carries the same
   tokens inline. Game, team, event, player, score and watch pages keep their
   own app-matched styling. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=JetBrains+Mono:wght@700&display=swap");

:root, :root[data-theme] {
  color-scheme: light;
  /* features.html / index-era names */
  --bg-deepest: #F5F5F2;
  --bg-deep: #F5F5F2;
  --bg-card: #FFFFFF;
  --bg-elevated: #FBFAF8;
  --bg-surface: #FFFFFF;
  --accent: #E07A1F;
  --accent-dim: rgba(224, 122, 31, 0.12);
  --accent-glow: rgba(224, 122, 31, 0.06);
  --text-primary: #1C1B1F;
  --text-secondary: #5A565F;
  --text-tertiary: #7A7680;
  --text-muted: #7A7680;
  --border: #E2DFDA;
  /* privacy / terms names */
  --bg: #F5F5F2;
  --card: #FFFFFF;
  --text: #1C1B1F;
  --text2: #5A565F;
  --text3: #7A7680;
}

html, body {
  background: #F5F5F2 !important;
  color: #1C1B1F;
  font-family: Archivo, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}
h1, h2, h3, h4, .nav-logo, .section-title, .hero-title {
  font-family: Archivo, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.nav-logo span, .logo span { color: #E07A1F !important; }

/* Top bars: light, with a hairline */
nav, header, .topbar, .header {
  background: rgba(245, 245, 242, 0.94) !important;
  border-bottom: 1px solid #E2DFDA !important;
  backdrop-filter: blur(8px);
}
nav a, header a { color: #5A565F; }
nav a:hover, header a:hover { color: #1C1B1F; }

/* Cards and panels */
.card, .tier, .tier-card, .feature, .feature-card, .panel, .box, form, .faq-item, section .inner-card {
  background: #FFFFFF !important;
  border-color: #E2DFDA !important;
  box-shadow: 0 1px 2px rgba(17, 18, 21, 0.04);
}

/* Form fields */
input, select, textarea {
  background: #FFFFFF !important;
  color: #1C1B1F !important;
  border: 1px solid #D8D4CE !important;
  border-radius: 10px !important;
}
input::placeholder, textarea::placeholder { color: #9A96A0 !important; }
label { color: #5A565F; }

/* Buttons: the app's orange with dark text */
button[type="submit"], .btn-primary, .nav-cta, .cta, .submit-btn, .button-primary {
  background: #FF9640 !important;
  color: #1A1004 !important;
  border: none !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
}
a { color: #B5651D; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #E07A1F; outline-offset: 2px;
}
code, kbd, .mono, .eyebrow, .eb {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
footer { background: transparent !important; border-top: 1px solid #E2DFDA !important; color: #5A565F; }

/* Comfortable reading width and spacing on text pages */
main, .content, .container { line-height: 1.6; }
p, li { max-width: 72ch; }