/* ============================================================
   Design Tokens / Variables
   ------------------------------------------------------------
   Central place for values that are likely to change later
   (brand color, breakpoints, stacking order, key dimensions).
   Loaded before every other stylesheet so all of them can
   reference these custom properties.
   ============================================================ */

:root {
  /* Brand color used for the header background and the desktop
     "outer" fill area. Change this one value to re-theme both. */
  --color-brand: #70836e;

  /* Dimensions copied from index.css so responsive.css / sticky
     rules can stay in sync without hunting through the generated
     file. These do NOT change anything on their own. */
  --frame-width: 503px;      /* .main-container width (desktop preview frame) */
  --card-width: 375px;       /* .mobile-main-english width (the actual mobile page) */
  --header-height: 71px;     /* .group (logo bar) height */

  /* Left/right gutter for menu content (rows, wide cards, combo
     banner) inside the --card-width frame. Was an implicit 18px
     (339px content in a 375px card) baked into menu.css; now a
     single value everything else derives from. */
  --content-side-padding: 10px;

  /* Scale factor applied to the whole card (content + fixed
     header + fixed AR button) so the design grows/shrinks with
     the viewport instead of staying frozen at 375px. Below
     375px it shrinks (100vw/375 < 1); above it, it grows right
     along with wider phones like the 15/16 Pro Max (~430px)
     instead of leaving background bars on both sides. Capped at
     the top by --breakpoint-mobile so tablets/desktop don't keep
     scaling up indefinitely -- past that point extra width is
     just background, matching the "preview frame" treatment. */
  --page-scale: clamp(
    0.6,
    calc(100vw / var(--card-width, 375px)),
    calc(var(--breakpoint-mobile, 503px) / var(--card-width, 375px))
  );

  /* Breakpoint: anything at or below this is treated as "mobile",
     and is the upper bound --page-scale grows to. */
  --breakpoint-mobile: 503px;

  /* Stacking order for the fixed header / AR button. Kept above
     the highest z-index already used in index.css (178) with
     headroom for future additions. */
  --z-sticky-header: 500;

  /* AR button: original in-design size + how far it floats off
     the bottom edge of the screen. */
  --ar-button-width: 66px;
  --ar-button-height: 30px;
  --ar-button-bottom-offset: 16px;

  /* Reserved space at the very bottom of the page so the last
     menu image never sits underneath the floating AR button. */
  --content-bottom-safe: 62px;
}