/* Reference-inspired web Light colors and shared Light/Dark typography. */
html[data-scheme="light"] {
  --mat: #FFFFFF;
  --mat-deep: #FFFFFF;
  --hall: #FFFFFF;
  --line: #111111;
  --ln: 17,17,17;
  --ink: #111111;
  --ink-soft: #626267;
  --volt: #111111;
  --cork: #A8481B;
  --btn-bg: #D9F24B;
  --btn-fg: #111111;
  color-scheme: light;
}

html:is([data-scheme="light"], [data-scheme="dark"]) {
  --body: "Archivo", system-ui, sans-serif;
  --mono: "Archivo", system-ui, sans-serif;
}

html:is([data-scheme="light"], [data-scheme="dark"]) body {
  font-variation-settings: "wdth" 100;
  line-height: 1.55;
}

html:is([data-scheme="light"], [data-scheme="dark"]) :is(h1, h2, h3, h4, .u-display) {
  font-variation-settings: "wdth" 100;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
}

html[data-scheme="light"] :is(.topbar, .hero, .mobile-role-screen, .auth-page, .brand-intro, .foot) {
  background: var(--mat-deep);
  color: var(--line);
}

html[data-scheme="light"] .hero h1 em { color: inherit; }
html[data-scheme="light"] .factlist b { color: var(--line); }
html[data-scheme="light"] .tab:hover { color: var(--line); border-color: rgba(var(--ln), .4); }
html[data-scheme="light"] .quiz-gate { background: rgba(255, 255, 255, .97); border-radius: 24px; }
html[data-scheme="light"] .mf-edit { background: rgba(var(--ln), .02); }
html[data-scheme="light"] .sm-header { background: var(--mat-deep); }
html[data-scheme="light"] .sm-main { padding-top: clamp(32px, 4vw, 56px); }
html[data-scheme="light"] .sm-sub { margin-bottom: 32px; }

html[data-scheme="light"] :is(.sm-card, .sm-block, .fin-card, .fin-stat, .billing-card, .sm-login, .quiz-card, .court-card, .board, .role-card, .billing-plan) {
  background: var(--mat);
  border-radius: 24px;
  border-color: rgba(var(--ln), .07);
  box-shadow: none;
}

html[data-scheme="light"] .sm-block {
  padding: clamp(20px, 3vw, 32px);
}

/* Barely off-white nested surfaces; derive from club tokens so saved palettes
   still take precedence rather than forcing white on customized clubs. */
html[data-scheme="light"] :is(.info-pop, .billing-terms-copy, .billing-checkout-summary, .sm-input-inline, .sm-table th, .mlog-form .mtype-toggle, .mlog-form .team-zone, .mlog-form .score-entry-row, .mlog-history .mc-cal-wrap) {
  background: color-mix(in srgb, var(--mat) 99%, var(--line));
}

html[data-scheme="light"] .lb-wrap .sm-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--mat) 98%, var(--line));
}

html[data-scheme="light"] :is(.sm-table th, .sm-table td, .board-row, .factlist li) {
  border-color: rgba(var(--ln), .1);
}

html:is([data-scheme="light"], [data-scheme="dark"]) :is(.btn, .sm-btn, .smash-btn, .tab, .shot-pill, .sm-nav button, .topbar nav a, .sm-header-action) {
  font-size: .875rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.01em;
}

/* Button fill is independent of the black text/accent token. Club button
   overrides still use their existing --btn-bg and --btn-fg settings. */
html[data-scheme="light"] :is(.btn-solid, .sm-btn.solid, .smash-btn, .sm-chip.paid, .sm-header-action.is-featured, .fin-stat.primary, .billing-plan-badge, .pa-type button[aria-pressed="true"], .support-filter-btn[aria-pressed="true"], .mc-day-pill.on, .shot-pill[aria-pressed="true"], .tab[aria-selected="true"]) {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}

html[data-scheme="light"] :is(.btn-ghost, .sm-btn.ghost, .topbar nav a) {
  border-color: rgba(var(--ln), .16);
  color: var(--line);
}

html[data-scheme="light"] :is(.btn-ghost, .sm-btn.ghost):hover {
  background: rgba(var(--ln), .04);
}

html[data-scheme="light"] :is(.sm-field input, .sm-field select, .sm-field textarea) {
  background: var(--mat-deep);
  border-color: rgba(var(--ln), .16);
}

html[data-scheme="light"] :is(.sm-field input, .sm-field select, .sm-field textarea):focus {
  border-color: #688000;
  outline: 2px solid rgba(104, 128, 0, .16);
  outline-offset: 1px;
}

html[data-scheme="light"] .rk-badge {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}

html[data-scheme="light"] .rk-badge.none {
  background: transparent;
  border-color: rgba(var(--ln), .16);
  color: var(--line);
}

html[data-scheme="light"] .rk-bar i { background: #688000; }
html[data-scheme="light"] .rk-note { color: rgba(var(--ln), .65); }

@media (max-width: 620px) {
  html[data-scheme="light"] :is(.sm-card, .sm-block, .sm-login, .billing-card, .role-card) {
    border-radius: 20px;
  }
}