/* The same layout in a quiet, cool light mode. */
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f2f5f9;
  --ink: #202429;
  --muted: #636971;
  --line: #d5d9df;
  --green: #245b9a;
  --lime: #245b9a;
  --white: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f5f7f9;
  --surface-soft: #e4e8ee;
  background: var(--paper);
  color: var(--ink);
}

:root[data-theme="light"] body { background-image: radial-gradient(ellipse 70% 45% at 76% -18%, #d9e0e8 0%, transparent 70%); }
:root[data-theme="light"] .sidebar { background: #e7eaee; border-right-color: #d1d6dd; }
:root[data-theme="light"] .brand { color: #262d36; }
:root[data-theme="light"] .brand-mark { color: #fff; background: #245b9a; box-shadow: none; }
:root[data-theme="light"] .brand-dot { color: #57677d; }
:root[data-theme="light"] .sidebar>.eyebrow { color: #68717d; }
:root[data-theme="light"] .sidebar .nav-button { color: #525861; }
:root[data-theme="light"] .sidebar .nav-button:hover { color: #222b36; background: #dadfe5; }
:root[data-theme="light"] .sidebar .nav-button.active { color: #202b3a; background: #d0dae6; border-color: #a3b1c4; }
:root[data-theme="light"] .sidebar .nav-button.active svg { color: #3c516c; }
:root[data-theme="light"] .sidebar-footer { border-top-color: #cad0d8; }
:root[data-theme="light"] .sidebar-footer strong { color: #29313b; }
:root[data-theme="light"] .avatar { color: #364251; background: #dde2e9; border-color: #f2f5f8; }
:root[data-theme="light"] .topbar { color: #676e78; }
:root[data-theme="light"] .topbar-context { color: #6b737d; }
:root[data-theme="light"] .prototype-label { color: #535e6c; background: #e9edf3; border-color: #c7cfda; }
:root[data-theme="light"] .theme-toggle { color: #314053; background: #dce2ea; border-color: #a4b1c1; }
:root[data-theme="light"] .theme-toggle:hover { background: #d0d8e3; border-color: #75859b; }
:root[data-theme="light"] .theme-icon { color: #245b9a; }
:root[data-theme="light"] .heading-copy>.eyebrow,
:root[data-theme="light"] .eyebrow { color: #576474; }
:root[data-theme="light"] .page-heading h1 { color: #1f2329; }
:root[data-theme="light"] .heading-copy p:not(.eyebrow) { color: #5e646b; }

:root[data-theme="light"] .hero-card { color: #f5f8fb; background: linear-gradient(125deg, #316391, #173f71 67%, #265585); border-color: #5c6c80; box-shadow: 0 14px 32px #25324418; }
:root[data-theme="light"] .hero-card:after { border-color: #ffffff12; box-shadow: 0 0 0 35px #ffffff08, 0 0 0 70px #ffffff05; }
:root[data-theme="light"] .hero-card .eyebrow { color: #cfdae8; }
:root[data-theme="light"] .hero-card .pill { color: #e4ecf7; background: #ffffff18; border-color: #ffffff3d; }
:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .stat strong { color: #fff; }
:root[data-theme="light"] .hero-title>span,
:root[data-theme="light"] .stat span,
:root[data-theme="light"] .stat strong>span { color: #d5dee9; }
:root[data-theme="light"] .hero-link { color: #e6eef9; background: #ffffff14; border-color: #ffffff54; }
:root[data-theme="light"] .hero-link:hover { background: #ffffff2e; }
:root[data-theme="light"] .hero-rules-link { color: #e2eefc; }
:root[data-theme="light"] .hero-rules-link:hover { color: #fff; }
:root[data-theme="light"] .hero-decoration { color: #ffffff0c; }
:root[data-theme="light"] .section-heading { border-bottom-color: #cad0d8; }
:root[data-theme="light"] .section-heading h2 { color: #242a33; }
:root[data-theme="light"] .section-heading p,
:root[data-theme="light"] .section-heading>span { color: #636a72; }
:root[data-theme="light"] .segmented { background: #e6e9ee; border-color: #ccd3dc; }
:root[data-theme="light"] .filter-button { color: #505862; }
:root[data-theme="light"] .filter-button:hover { color: #202d3d; background: #d6dce4; }
:root[data-theme="light"] .filter-button.active { color: #fff; background: #245b9a; }
:root[data-theme="light"] .filter-button span { color: #424f60; background: #d3dae3; }
:root[data-theme="light"] .filter-button.active span { color: #fff; background: #52647c; }

:root[data-theme="light"] .match-card,
:root[data-theme="light"] .pool-card,
:root[data-theme="light"] .info-card,
:root[data-theme="light"] .admin-form,
:root[data-theme="light"] .leaderboard,
:root[data-theme="light"] .member-list,
:root[data-theme="light"] .empty-state { background: #fff; color: #202429; border-color: #d5d9df; box-shadow: 0 12px 24px #3140540b; }
:root[data-theme="light"] .match-card:hover,
:root[data-theme="light"] .pool-card:hover { border-color: #8694a6; box-shadow: 0 12px 30px #31405418; }
:root[data-theme="light"] .match-closed { background: #f6f8fa; }
:root[data-theme="light"] .match-meta,
:root[data-theme="light"] .match-time,
:root[data-theme="light"] .team-side,
:root[data-theme="light"] .score-caption,
:root[data-theme="light"] .status,
:root[data-theme="light"] .player-meta,
:root[data-theme="light"] .pool-card p,
:root[data-theme="light"] .info-card p,
:root[data-theme="light"] .pool-card-footer,
:root[data-theme="light"] .small { color: #626870; }
:root[data-theme="light"] .sport-tag { color: #3f5571; }
:root[data-theme="light"] .match-time.live { color: #9a5c22; }
:root[data-theme="light"] .team-badge { color: #3b4b60; background: #e8ecf1; border-color: #cbd2dc; }
:root[data-theme="light"] .team-name { color: #232a32; }
:root[data-theme="light"] .score-input { color: #1c222a; background: #f7f8fa; border-color: #b7bec8; }
:root[data-theme="light"] .score-input::placeholder { color: #818892; }
:root[data-theme="light"] .score-input:focus { color: #1c222a; background: #fff; border-color: #4d6079; box-shadow: 0 0 0 3px #94a6bd30; }
:root[data-theme="light"] .score-separator,
:root[data-theme="light"] .locked-score span { color: #747b85; }
:root[data-theme="light"] .match-footer,
:root[data-theme="light"] .rank-row,
:root[data-theme="light"] .pool-card-footer,
:root[data-theme="light"] .member-row,
:root[data-theme="light"] .detail-row { border-color: #dadfe5; }
:root[data-theme="light"] .save-button,
:root[data-theme="light"] .primary-button { color: #fff; background: #245b9a; }
:root[data-theme="light"] .save-button:hover,
:root[data-theme="light"] .primary-button:hover { color: #fff; background: #2d3c50; }
:root[data-theme="light"] .save-button:disabled { color: #38485d; background: #dfe5ed; border-color: #c3cad4; opacity: 1; }
:root[data-theme="light"] .save-button.is-saved:disabled { color: #38485d; background: #dfe5ed; }
:root[data-theme="light"] .secondary-button { color: #303c4b; background: #eef1f5; border-color: #c3cad4; }
:root[data-theme="light"] .secondary-button:hover { background: #e1e6ed; }
:root[data-theme="light"] .secondary-button.danger-button { color: #9e3c34; border-color: #bd6a62; background: transparent; }
:root[data-theme="light"] .secondary-button.danger-button:hover { color: #fff; background: #a53d32; }
:root[data-theme="light"] .text-button { color: #31455f; }
:root[data-theme="light"] .text-button:hover { color: #203249; }
:root[data-theme="light"] .status.saved { color: #3e5676; }
:root[data-theme="light"] .status.error { color: #a1443d; }
:root[data-theme="light"] .points-badge,
:root[data-theme="light"] .pill,
:root[data-theme="light"] .you-label { color: #36465c; background: #e0e7f0; }
:root[data-theme="light"] .privacy-note { color: #686e77; }

:root[data-theme="light"] .rank-row.you { background: #e9eef5; }
:root[data-theme="light"] .rank-number,
:root[data-theme="light"] .rank-points>span { color: #656d77; }
:root[data-theme="light"] .podium-player { color: #505c6b; background: linear-gradient(0deg, #e2e7ed, transparent); }
:root[data-theme="light"] .podium-player.place-1 { background: linear-gradient(0deg, #ced9e7, transparent); }
:root[data-theme="light"] .podium-player strong { color: #252c35; }
:root[data-theme="light"] .podium-avatar,
:root[data-theme="light"] .podium-player:first-child .podium-avatar { color: #3c4c62; background: #e0e5eb; border-color: #f2f5f8; }
:root[data-theme="light"] .podium-player.place-1 .podium-avatar { color: #f2f5f8; background: #41536b; border-color: #e8edf4; box-shadow: 0 0 0 1px #aebbcd; }
:root[data-theme="light"] .podium-medal,
:root[data-theme="light"] .place-1 .podium-medal { color: #4d6078; }
:root[data-theme="light"] .ranking-note { background: #f5f7fa; border-color: #b9c3cf; }
:root[data-theme="light"] .pool-icon,
:root[data-theme="light"] .pool-card:nth-child(2) .pool-icon,
:root[data-theme="light"] .community-icon { color: #3b4f69; background: #e0e6ee; }
:root[data-theme="light"] .pool-card-footer svg { color: #495f7b; }
:root[data-theme="light"] .invitation-card { background: #e9eef5; border-color: #a4b4c9; }
:root[data-theme="light"] .banner { color: #36465c; background: #e3e9f1; border-color: #b5c2d4; }
:root[data-theme="light"] .result-card .banner p { color: #616c7a; }
:root[data-theme="light"] .result-card .match-state-open { color: #245b4f; background: #e6f4ef; border-color: #b2d6ca; }
:root[data-theme="light"] .result-card .match-state-closed { color: #715624; background: #f7f0dc; border-color: #dccca4; }
:root[data-theme="light"] .result-card .match-state-finished { color: #305b7d; background: #e9f2fa; border-color: #b9d2e9; }
:root[data-theme="light"] .result-card .match-state-cancelled { color: #943b33; background: #fbece9; border-color: #e7b9b4; }
:root[data-theme="light"] .member-role { color: #405773; background: #e7edf5; }
:root[data-theme="light"] .member-dot { background: #5e7696; }
:root[data-theme="light"] .detail-row>span:first-child { color: #646a72; }
:root[data-theme="light"] .empty-state { color: #5f6771; }
:root[data-theme="light"] .empty-state>svg { color: #475e7d; }
:root[data-theme="light"] .empty-state h3 { color: #262e38; }

:root[data-theme="light"] .field { color: #333b45; }
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea { color: #232931; background: #fafbfc; border-color: #bcc3cd; }
:root[data-theme="light"] .field input::placeholder,
:root[data-theme="light"] .field textarea::placeholder { color: #717983; }
:root[data-theme="light"] .field input:focus,
:root[data-theme="light"] .field select:focus,
:root[data-theme="light"] .field textarea:focus { border-color: #4e617a; }
:root[data-theme="light"] .field select option { color: #232931; background: #fff; }
:root[data-theme="light"] .modal-backdrop { background: #1a212a8c; }
:root[data-theme="light"] .modal { color: #232931; background: #fff; border-color: #c8ced7; box-shadow: 0 30px 100px #1d273340; }
:root[data-theme="light"] .modal p { color: #58606a; }
:root[data-theme="light"] .close-modal { color: #34455c; background: #e3e8ee; }
:root[data-theme="light"] .community-score span { color: #76808c; }
:root[data-theme="light"] .toast { color: #f5f8fc; background: #31435a; border-color: #617185; box-shadow: 0 10px 32px #1f2e423d; }
:root[data-theme="light"] .prototype-tools { color: #616973; border-top-color: #d0d6dd; }
:root[data-theme="light"] .prototype-tools .action-row button { color: #313f52; background: #e5eaf0; border-color: #bcc5d0; }
:root[data-theme="light"] .prototype-tools .action-row button:hover { background: #d9e0e9; }
@media (max-width: 640px) {
  :root[data-theme="light"] .bottom-nav { color: #565e68; background: #f2f5f8f5; border-top-color: #c9d0d9; box-shadow: 0 -8px 30px #31405412; }
  :root[data-theme="light"] .bottom-nav .nav-button { color: #5d6570; }
  :root[data-theme="light"] .bottom-nav .nav-button.active { color: #2b3e56; background: #d8e0eb; }
}