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

  /* Breakpoint: anything at or below this is treated as "mobile". */
  --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;
}