/* Light mode for Roll (game/) and T@P(SHOP) — reads html[data-theme] from tapfit_theme localStorage */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f5;
  --bg-elevated: #ffffff;
  --bg-elevated-soft: #ebebef;
  --accent: #5a5a5a;
  --accent-soft: rgba(0, 0, 0, 0.06);
  --accent-strong: #333333;
  --silver: #666666;
  --metallic-light: #222222;
  --danger: #c62828;
  --text: #1a1a1a;
  --text-muted: #5c5c5c;
  --text-silver: #333333;
  --border-subtle: rgba(0, 0, 0, 0.1);
  --border-color: rgba(0, 0, 0, 0.14);
  --surface-panel: linear-gradient(180deg, #e8e8ec 0%, #dcdce0 100%);
  --surface-card: linear-gradient(165deg, #ffffff 0%, #f5f5f8 100%);
  --surface-input: linear-gradient(180deg, #ffffff 0%, #f8f8fa 100%);
  --surface-chip: linear-gradient(180deg, #ffffff 0%, #f0f0f3 100%);
  --surface-btn-secondary: linear-gradient(180deg, #ffffff 0%, #ececf0 100%);
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.1);
  --shadow-3d: 0 4px 0 #d8d8dc, 0 6px 12px rgba(0, 0, 0, 0.08);
  --slot-reel-bg: #e4e4e8;
  --slot-frame: linear-gradient(180deg, #d8d8dc 0%, #c8c8cc 50%, #bcbcbe 100%);
  --dice-cabinet-bg: radial-gradient(ellipse 120% 80% at 50% 20%, #dceee2 0%, #c5dcc9 42%, #b4cfba 100%);
  --dice-face-light: #ffffff;
  --dice-face-mid: #f5f5f5;
  --dice-face-shade: #e0e0e0;
  --dice-pip: #111111;
  --dice-edge: rgba(0, 0, 0, 0.14);
  --dice-exercise-text: #1a1a1a;
}

html[data-theme="light"] .dice-cabinet {
  background: var(--dice-cabinet-bg) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -6px 18px rgba(0, 0, 0, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .dice-title,
html[data-theme="light"] .tap-to-play-hint {
  color: #1a4d32 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .dice-stage {
  background: rgba(255, 255, 255, 0.42) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .tap-points-panel {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(180, 140, 20, 0.35) !important;
}

html[data-theme="light"] .tap-points-count {
  color: var(--text) !important;
}

html[data-theme="light"] .tap-claimed-today {
  color: #15803d !important;
}

html[data-theme="light"] .dice-workout-timer-bar.dice-workout-timer-done {
  background: linear-gradient(180deg, #fde8e8 0%, #fcd4d4 100%) !important;
}

html[data-theme="light"] .result-modal,
html[data-theme="light"] .shop-toolbar,
html[data-theme="light"] .shop-sidebar,
html[data-theme="light"] .product-card,
html[data-theme="light"] .product-modal,
html[data-theme="light"] .confirmation-summary {
  background: var(--surface-panel) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .dice-workout-timer-bar {
  background: linear-gradient(180deg, #e8f5ec 0%, #dceee2 100%) !important;
  border-color: rgba(4, 120, 87, 0.35) !important;
}

html[data-theme="light"] .dice-workout-timer-display {
  color: var(--text) !important;
  text-shadow: none !important;
}

html[data-theme="light"] .dice-workout-timer-actions .btn-timer-secondary,
html[data-theme="light"] .cart-btn {
  background: var(--surface-chip) !important;
  color: var(--text) !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .cart-btn:hover {
  color: var(--text) !important;
}

html[data-theme="light"] .shop-toolbar select,
html[data-theme="light"] .product-modal-qty input,
html[data-theme="light"] .product-option-select,
html[data-theme="light"] .checkout-form input,
html[data-theme="light"] .checkout-form select,
html[data-theme="light"] .product-modal-notify-input,
html[data-theme="light"] .checkout-form textarea {
  background: var(--surface-input) !important;
  color: var(--text) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] .cart-checkout-heading,
html[data-theme="light"] .checkout-step-title,
html[data-theme="light"] .order-success-section .order-success-title,
html[data-theme="light"] .product-modal-title,
html[data-theme="light"] .cart-toast {
  color: var(--text) !important;
}

html[data-theme="light"] .cart-toast {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .product-image,
html[data-theme="light"] .product-modal-gallery {
  background: var(--bg-elevated-soft) !important;
}

html[data-theme="light"] .shop-nav-item.is-active,
html[data-theme="light"] .shop-nav-item:hover,
html[data-theme="light"] .shop-nav-group-label.is-active {
  background: var(--bg-elevated-soft) !important;
  color: var(--text) !important;
}

html[data-theme="light"] .product-title,
html[data-theme="light"] .product-price,
html[data-theme="light"] .brand-title,
html[data-theme="light"] .cart-item-name,
html[data-theme="light"] .cart-item-price {
  color: var(--text) !important;
}

html[data-theme="light"] .brand-title {
  text-shadow: none !important;
}

html[data-theme="light"] .shop-taps-earned {
  color: var(--text-muted) !important;
}

html[data-theme="light"] .product-modal-price,
html[data-theme="light"] .product-modal-notify-title {
  color: var(--text) !important;
}