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

  /* The product detail view (MenuMod) and the modifier block on it read these
     same name / desc tokens directly — no tokens of their own. Their old
     pixels (name 16px/900, description 13px/400, price 16px) are deliberately
     dropped in favour of the list's, so the two screens are typeset alike. */

  /* The six chrome groups — --tmo-online-font-{header,footer-action,
     footer-price,system-heading,system-body,system-small}-{family,weight} — are
     deliberately absent from :root. Their targets never shared a weight (the
     shop name was 700, `.TopBar p` 600, the order bars 900, the count badge
     400, the small print 400), so a single default here would move whichever of
     them does not match it. Each rule keeps its own old value as the var()
     fallback and Application.js writes a token only when the shop picks
     something other than "Default". The same applies to the families, which
     must fall back to `inherit`. See
     .claude/docs/design/03-online-font-scope-taxonomy.md. */
}

/* Layer A of the coverage guarantee: the pages of the ordering flow take the
   "System Text - Normal" font as their baseline, so any text we did not assign
   to a group still follows a setting instead of silently never changing.
   Both fall back to `inherit`, i.e. the site-wide font on <body>, so a shop
   that never opened these settings renders exactly as before. */
.App.HomePage,
.App.OrderTimePage,
.App.ShoppingPage,
.App.PreOrderPage,
.App.AddAddressPage,
.Cart,
.ResultSucceeded {
  font-family: var(--tmo-online-font-system-body-family, inherit);
  font-weight: var(--tmo-online-font-system-body-weight, inherit);
}


/* Layer B, last hole: these classes carry text but no stylesheet ever gave them
   a font, so the page baseline above would have filed them under "System Text -
   Normal". The ledger puts them elsewhere, so they get their own rule. Both
   fall back to `inherit`, i.e. exactly what they resolve to today. See
   .claude/docs/design/03-online-font-scope-taxonomy.md */

/* Footer - Price / Label */
.MenuDetailFooterAmountButton,
.MenuDetailFooterAmountNameText {
  font-family: var(--tmo-online-font-footer-price-family, inherit);
  font-weight: var(--tmo-online-font-footer-price-weight, inherit);
}

/* System Text - Heading */
.result-comment-top-desc,
.result-comment-top-name {
  font-family: var(--tmo-online-font-system-heading-family, inherit);
  font-weight: var(--tmo-online-font-system-heading-weight, inherit);
}

/* System Text - Small */
.ModifierLabelRowInputLabel,
.PreOrderTimePickerErrorSelectItemFirst,
.cart-delivery-min-warning,
.cart-preorder-notice-nodate1,
.cart-preorder-notice-nodate2,
.header-warning,
.home-store-selection-store-diningoption,
.home-store-selection-store-openinghour-text,
.home-store-selection-store-openinghour-title,
.items-header-each,
.items-header-name,
.items-header-price,
.items-header-quantity,
.menu-cals,
.menu-communication-error,
.menu-detail-cals,
.menu-remainamount-error,
.mod-row-each,
.mod-row-name,
.mod-row-price,
.mod-row-quantity,
.no-history-text2,
.prod-row-each,
.prod-row-name,
.prod-row-price,
.prod-row-quantity,
.result-footer-row-cancel-text,
.result-footer-row-message-text,
.tax-name,
.tax-value {
  font-family: var(--tmo-online-font-system-small-family, inherit);
  font-weight: var(--tmo-online-font-system-small-weight, inherit);
}

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