/* ==========================================================================
   TMO Online Design Tokens - Default Values
   These are overridden at runtime by setColorSchemeCSS() in Application.js
   ========================================================================== */

:root {
  /* Existing tokens (defaults match current hardcoded values) */
  --tmo-online-bg-page: #ffffff;
  --tmo-online-text-primary: #333333;
  --tmo-online-bg-header: #303030;
  --tmo-online-text-on-header: #ffffff;
  --tmo-online-footer-bg: #ed931f;
  --tmo-online-footer-text: #ffffff;
  --tmo-online-btn-bg: #ed931f;
  --tmo-online-btn-text: #ffffff;
  --tmo-online-selected-bg: #820a32;
  --tmo-online-selected-text: #ffffff;
  --tmo-online-bg-unavailable: #dddddd;

  /* New design tokens */
  --tmo-online-bg-surface-2nd: #F2F2F7;
  --tmo-online-text-secondary: #6b7280;
  --tmo-online-text-danger: #dc3545;
  --tmo-online-text-success: #28a745;
  --tmo-online-text-discount: #f360a6;
  --tmo-online-divider: #e9ecef;
  --tmo-online-text-title: #303030;
  --tmo-online-badge-bg: #ed931f;
  --tmo-online-badge-text: #ffffff;
  --tmo-online-body-radius: 0px;
  --tmo-online-body-radius-sm: calc(var(--tmo-online-body-radius) * 0.5);
  --tmo-online-body-radius-lg: calc(var(--tmo-online-body-radius) * 1.5);
  --tmo-online-body-shadow: none;

  /* Auto-calculated hover colors (overridden by JS) */
  --tmo-online-btn-hover-bg: #c97d1a;
  --tmo-online-footer-hover-bg: #c97d1a;
  --tmo-online-selected-hover-bg: #6e082b;
}

/* Thin scrollbar for fullscreen modals (desktop only) */
@media (hover: hover) and (pointer: fine) {
  #NotificationListModal,
  #GateUserMenuModal,
  #VoucherListModal,
  #SNSPostingModal,
  #SNSCodeModal,
  #PrepaidHistoryModal,
  #BadgeListModal,
  #FeedbackModal {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
  }
  #NotificationListModal::-webkit-scrollbar,
  #GateUserMenuModal::-webkit-scrollbar,
  #VoucherListModal::-webkit-scrollbar,
  #SNSPostingModal::-webkit-scrollbar,
  #SNSCodeModal::-webkit-scrollbar,
  #PrepaidHistoryModal::-webkit-scrollbar,
  #BadgeListModal::-webkit-scrollbar,
  #FeedbackModal::-webkit-scrollbar {
    width: 6px;
  }
  #NotificationListModal::-webkit-scrollbar-track,
  #GateUserMenuModal::-webkit-scrollbar-track,
  #VoucherListModal::-webkit-scrollbar-track,
  #SNSPostingModal::-webkit-scrollbar-track,
  #SNSCodeModal::-webkit-scrollbar-track,
  #PrepaidHistoryModal::-webkit-scrollbar-track,
  #BadgeListModal::-webkit-scrollbar-track,
  #FeedbackModal::-webkit-scrollbar-track {
    background: transparent;
  }
  #NotificationListModal::-webkit-scrollbar-thumb,
  #GateUserMenuModal::-webkit-scrollbar-thumb,
  #VoucherListModal::-webkit-scrollbar-thumb,
  #SNSPostingModal::-webkit-scrollbar-thumb,
  #SNSCodeModal::-webkit-scrollbar-thumb,
  #PrepaidHistoryModal::-webkit-scrollbar-thumb,
  #BadgeListModal::-webkit-scrollbar-thumb,
  #FeedbackModal::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
  }
  #NotificationListModal::-webkit-scrollbar-thumb:hover,
  #GateUserMenuModal::-webkit-scrollbar-thumb:hover,
  #VoucherListModal::-webkit-scrollbar-thumb:hover,
  #SNSPostingModal::-webkit-scrollbar-thumb:hover,
  #SNSCodeModal::-webkit-scrollbar-thumb:hover,
  #PrepaidHistoryModal::-webkit-scrollbar-thumb:hover,
  #BadgeListModal::-webkit-scrollbar-thumb:hover,
  #FeedbackModal::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.35);
  }
}