/* Appearance theme overrides. Dark mode is the existing ALPHA design and remains
   the default. Light mode keeps the green card table but presents the room shell,
   controls, score cards, roster, chat, and dialogs as a brighter daytime table. */

html[data-pepper-theme="dark"] {
  color-scheme:dark;
}

html[data-pepper-theme="light"] {
  color-scheme:light;
  background:#edf2ef !important;
  --bg:#edf2ef;
  --surface:#ffffff;
  --surface-2:#f5f7f5;
  --surface-3:#e9eeeb;
  --border:rgba(24,46,36,.13);
  --border-strong:rgba(24,46,36,.21);
  --text:#17231d;
  --muted:#68776f;
  --gold:#b88729;
  --gold-soft:#7a5819;
  --room-bg:#edf2ef;
  --room-panel:#ffffff;
  --room-panel-2:#f5f7f5;
  --room-line:#cbd6d0;
  --room-felt:#17704f;
  --room-felt-deep:#0d5b40;
}

html[data-pepper-theme="light"] body.body-dark {
  background:
    radial-gradient(circle at 50% 14%, rgba(74,137,104,.12), transparent 42rem),
    linear-gradient(180deg,#f9fbfa 0%,#edf2ef 76%) !important;
  color:#17231d !important;
}

/* Header */
html[data-pepper-theme="light"] .site-header {
  background:rgba(255,255,255,.94) !important;
  border-bottom-color:#d6dfda !important;
  box-shadow:0 4px 18px rgba(28,50,39,.06) !important;
}
html[data-pepper-theme="light"] .brand,
html[data-pepper-theme="light"] .brand:hover,
html[data-pepper-theme="light"] .brand__wordmark {
  color:#17231d !important;
}
html[data-pepper-theme="light"] .brand__badge {
  background:#e8eeeb !important;
  color:#52635a !important;
}
html[data-pepper-theme="light"] .mock-game-meta,
html[data-pepper-theme="light"] .mock-game-meta__gear,
html[data-pepper-theme="light"] #mock-game-label {
  color:#526159 !important;
}
html[data-pepper-theme="light"] .header-player {
  background:#f2f6f3 !important;
  border-color:#cfd9d3 !important;
  color:#17231d !important;
}
html[data-pepper-theme="light"] .header-player__label {
  color:#738078 !important;
}

/* Settings */
html[data-pepper-theme="light"] .settings-menu {
  background:#ffffff !important;
  border-color:#cad5cf !important;
  color:#17231d !important;
  box-shadow:0 18px 48px rgba(29,51,40,.16) !important;
}
html[data-pepper-theme="light"] .settings-menu__row {
  border-top-color:#e0e6e2 !important;
}
html[data-pepper-theme="light"] .settings-menu label,
html[data-pepper-theme="light"] .settings-menu__title {
  color:#25342c !important;
}
html[data-pepper-theme="light"] .settings-menu select {
  background:#f7f9f8 !important;
  border-color:#cbd5cf !important;
  color:#26352d !important;
}
html[data-pepper-theme="light"] .settings-menu select:focus {
  outline-color:rgba(184,135,41,.35) !important;
}

/* Score cards */
html[data-pepper-theme="light"] .team-1-bg {
  background:linear-gradient(145deg,#e1edf9,#cfdfef) !important;
  border-color:#8eafd0 !important;
  box-shadow:0 12px 30px rgba(55,89,120,.12) !important;
}
html[data-pepper-theme="light"] .team-2-bg {
  background:linear-gradient(145deg,#e0f1e5,#cde6d5) !important;
  border-color:#8ab59a !important;
  box-shadow:0 12px 30px rgba(49,102,70,.11) !important;
}
html[data-pepper-theme="light"] .mock-score__team {
  color:#20312a !important;
}
html[data-pepper-theme="light"] .mock-score__stat {
  color:#53675d !important;
}
html[data-pepper-theme="light"] .mock-score__value {
  color:#15231c !important;
}
html[data-pepper-theme="light"] .mock-score__stat + .mock-score__stat {
  border-left-color:rgba(35,60,48,.17) !important;
}

/* Felt stays recognizably Pepper, but becomes a brighter daytime green. */
@media (min-width:1200px) {
  html[data-pepper-theme="light"] #pepper-app > div > .row.mb-4.g-0::before {
    background:
      radial-gradient(circle at 50% 46%,rgba(50,151,104,.36),transparent 60%),
      linear-gradient(145deg,#17704f,#0d5b40) !important;
    border-color:#2b795c !important;
    box-shadow:inset 0 0 70px rgba(0,45,29,.18),0 18px 42px rgba(42,76,59,.16) !important;
    color:rgba(255,255,255,.18) !important;
  }

  /* Bid/action panel */
  html[data-pepper-theme="light"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0 {
    background:linear-gradient(145deg,#ffffff,#f5f8f6) !important;
    border-color:#cbd6d0 !important;
    box-shadow:0 14px 30px rgba(35,60,48,.10) !important;
    color:#1d2d25 !important;
  }
  html[data-pepper-theme="light"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0::before {
    color:#1d2d25 !important;
  }
  html[data-pepper-theme="light"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0::after {
    color:#687970 !important;
  }
  html[data-pepper-theme="light"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group > .btn {
    background:linear-gradient(#f4f7f5,#e7ece9) !important;
    border-color:#c2cec7 !important;
    color:#24342c !important;
  }
  html[data-pepper-theme="light"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group > .btn.btn-warning {
    background:linear-gradient(#efc968,#dcae45) !important;
    border-color:#d5a642 !important;
    color:#21190b !important;
  }

  /* Chat and Current Phase */
  html[data-pepper-theme="light"] #pepper-app .card {
    background:#ffffff !important;
    border-color:#cbd6d0 !important;
    box-shadow:0 14px 30px rgba(35,60,48,.09) !important;
    color:#223129 !important;
  }
  html[data-pepper-theme="light"] #pepper-app .card::before {
    background:#f7f9f8 !important;
    border-bottom-color:#d4ddd8 !important;
    color:#1d2d25 !important;
  }
  html[data-pepper-theme="light"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    background:linear-gradient(145deg,#ffffff,#f5f8f6) !important;
    border-color:#cbd6d0 !important;
    box-shadow:0 14px 30px rgba(35,60,48,.09) !important;
    color:#52655b !important;
  }
}

html[data-pepper-theme="light"] .chat-line {
  background:#f1f5f2 !important;
  color:#25362d !important;
}
html[data-pepper-theme="light"] .chat-line-username {
  color:#3f6f9d !important;
}
html[data-pepper-theme="light"] .card-footer {
  background:#f7f9f8 !important;
  border-top-color:#d4ddd8 !important;
}
html[data-pepper-theme="light"] .form-control {
  background:#ffffff !important;
  border-color:#bdcbc3 !important;
  color:#203129 !important;
}
html[data-pepper-theme="light"] .form-control:focus {
  background:#ffffff !important;
  color:#203129 !important;
  border-color:#6e927f !important;
  box-shadow:0 0 0 3px rgba(70,125,94,.12) !important;
}
html[data-pepper-theme="light"] .form-control::placeholder {
  color:#8a9890 !important;
}

/* Player roster and current contract */
html[data-pepper-theme="light"] .player-roster,
html[data-pepper-theme="light"] .winning-bid-summary {
  background:linear-gradient(145deg,#ffffff,#f5f8f6) !important;
  border-color:#cbd6d0 !important;
  box-shadow:0 12px 28px rgba(35,60,48,.10) !important;
  color:#203129 !important;
}
html[data-pepper-theme="light"] .player-roster__title,
html[data-pepper-theme="light"] .winning-bid-summary__team {
  color:#1d2d25 !important;
}
html[data-pepper-theme="light"] .player-roster__legend,
html[data-pepper-theme="light"] .player-roster__eyebrow,
html[data-pepper-theme="light"] .winning-bid-summary__eyebrow,
html[data-pepper-theme="light"] .player-roster__you {
  color:#728178 !important;
}
html[data-pepper-theme="light"] .winning-bid-summary__detail {
  color:#9b6c16 !important;
}
html[data-pepper-theme="light"] .player-roster__team {
  background:#f7f9f8 !important;
  border-color:#ced8d2 !important;
}
html[data-pepper-theme="light"] .player-roster__team--1 {
  background:#f2f7fc !important;
  border-color:#9ebbd6 !important;
}
html[data-pepper-theme="light"] .player-roster__team--2 {
  background:#f1f8f3 !important;
  border-color:#99bea5 !important;
}
html[data-pepper-theme="light"] .player-roster__team--1 .player-roster__team-title {
  color:#376d9f !important;
}
html[data-pepper-theme="light"] .player-roster__team--2 .player-roster__team-title {
  color:#39794f !important;
}
html[data-pepper-theme="light"] .player-roster__player {
  background:rgba(29,54,42,.035) !important;
  color:#283830 !important;
}
html[data-pepper-theme="light"] .player-roster__player.is-active {
  border-color:rgba(184,135,41,.58) !important;
  background:rgba(224,183,88,.16) !important;
  color:#1e2d25 !important;
}
html[data-pepper-theme="light"] .player-roster__seat {
  color:#75867d !important;
}
html[data-pepper-theme="light"] .player-roster__turn {
  color:#8a6116 !important;
}

/* General buttons and popovers */
html[data-pepper-theme="light"] .btn-secondary {
  background:#e5ebe7 !important;
  border-color:#bdcac2 !important;
  color:#26362e !important;
}
html[data-pepper-theme="light"] .suit-picker .btn-group-vertical {
  background:rgba(255,255,255,.96) !important;
  border-color:#cbd6d0 !important;
  box-shadow:0 10px 24px rgba(35,60,48,.12) !important;
}
html[data-pepper-theme="light"] .modal-content,
html[data-pepper-theme="light"] .pepper-invite-modal .modal-content {
  background:linear-gradient(145deg,#ffffff,#f5f8f6) !important;
  border-color:#cbd6d0 !important;
  color:#203129 !important;
  box-shadow:0 24px 70px rgba(35,60,48,.18) !important;
}
html[data-pepper-theme="light"] .modal-header,
html[data-pepper-theme="light"] .modal-footer {
  border-color:#d4ddd8 !important;
}
html[data-pepper-theme="light"] .modal-title,
html[data-pepper-theme="light"] .pepper-invite-modal .modal-title {
  color:#1e2e26 !important;
}
html[data-pepper-theme="light"] .pepper-invite-modal__eyebrow,
html[data-pepper-theme="light"] .pepper-invite-modal__intro,
html[data-pepper-theme="light"] .pepper-invite-modal__privacy {
  color:#6b7b72 !important;
}
html[data-pepper-theme="light"] .pepper-invite-team-summary,
html[data-pepper-theme="light"] .pepper-invite-row {
  background:#f7f9f8 !important;
  border-color:#cbd6d0 !important;
  color:#53655b !important;
}
html[data-pepper-theme="light"] .pepper-invite-row__heading strong {
  color:#223229 !important;
}
html[data-pepper-theme="light"] .pepper-invite-row__url {
  background:#ffffff !important;
  border-color:#c4d0c9 !important;
  color:#45584e !important;
}

@media (max-width:1199px) {
  html[data-pepper-theme="light"] .player-roster {
    background:linear-gradient(145deg,#ffffff,#f5f8f6) !important;
    border-color:#cbd6d0 !important;
  }
}