/* ==========================================================================
   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;

  /* --------------------------------------------------------------------
     Menu font tokens (online_font_* settings, overridden by setMenuFontCSS()).
     Defaults reproduce the pixel values MenuItem.css used before tokenisation,
     so a shop that leaves every setting on "Default" renders identically.

     `*-family` and `*-spacing` are deliberately NOT declared here: a custom
     property whose declared value is the CSS-wide keyword `inherit` resolves to
     guaranteed-invalid at :root, so those two are expressed as the fallback
     inside var() at the point of use instead.
     -------------------------------------------------------------------- */
  --tmo-online-font-heading-size: 19px;
  --tmo-online-font-heading-weight: 900;

  --tmo-online-font-name-size: 15px;
  --tmo-online-font-name-weight: 700;
  /* Kept as an exact fraction, not a rounded decimal: 15px * 1.0667 is
     16.0005px, and that 0.0005 propagates into every derived box height, so a
     shop on "Default" would not render byte-identically to the old fixed px. */
  --tmo-online-font-name-lh: calc(16 / 15); /* was line-height:16px on font-size:15px */
  --tmo-online-font-name-line: calc(var(--tmo-online-font-name-size) * var(--tmo-online-font-name-lh));
  --tmo-online-font-name-lines: 2;

  --tmo-online-font-desc-size: 12px;
  --tmo-online-font-desc-weight: 400;
  --tmo-online-font-desc-lh: calc(13 / 12); /* was line-height:13px on font-size:12px */
  --tmo-online-font-desc-line: calc(var(--tmo-online-font-desc-size) * var(--tmo-online-font-desc-lh));
  /* Visible lines of description. Overridden per breakpoint in MenuItem.css —
     the base value matches the old 70px but is dead in practice, because the
     min-width:480px rule (60px) already covers every viewport >= 480. */
  --tmo-online-font-desc-lines: calc(70 / 13);
}

/* 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);
  }
}