/* ── Design tokens ────────────────────────────────────────────────────────────
   Single source of truth for the shared menu (loaded first, so every other
   stylesheet can use these). Was hardcoded across all 6 CSS files. ───────────── */
:root {
  /* Type — named roles, not per-component sizes. Two weights only:
     400 regular, 590 semibold (SF Pro "Semibold"). Cleaned from 8 ad-hoc sizes
     (12/13/14/15/16/17/18/22) to 5 roles: dead h1(22)/.updated(12) removed,
     .error folded into caption. */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 590;

  --font-cta: 18px;      /* primary CTA label ("Show basket") */
  --font-heading: 17px;  /* item names, prices, totals */
  --font-nav: 16px;      /* category tabs */
  --font-body: 15px;     /* product titles, row prices */
  --font-caption: 13px;  /* labels, meta, footer, section titles */

  --lh-heading: 22px;
  --lh-body: 20px;
  --lh-caption: 16px;

  /* Surfaces — dark-theme elevation ramp, Y strictly increasing per step
     (+105% then +89% relative luminance, verified via maga-elevation). */
  --surface-0: #11141C;  /* page background */
  --surface-1: #1D2027;  /* card / basket row */
  --surface-2: #2B2E35;  /* add-button, image bg, close button */
  --surface-inverse: #FFFFFF;  /* white CTA order bar */
  --border-subtle: #2B2E35;  /* 1px card/row outline (same tone as surface-2) */

  /* Brand / accent */
  --accent: #6080FF;                        /* counter, active-tab fill */
  --accent-soft: rgba(96, 128, 255, 0.10);  /* active add-button fill */
  --header-bg: #3D58A1;                      /* sticky category header */
  --tab-tint-10: rgba(182, 197, 255, 0.10);
  --tab-tint-18: rgba(182, 197, 255, 0.18);
  --tab-tint-25: rgba(182, 197, 255, 0.25);
  --img-placeholder-bg: rgba(182, 197, 255, 0.10); /* same tint as --tab-tint-10, named for its own use site */

  /* Text — Lc vs background verified via maga-shared/apca-contrast */
  --text-primary: #FFFFFF;
  --text-secondary: #C4C4C6;   /* row price, icons */
  --text-name: #B0B2B6;        /* product name — Lc −58, sits clearly below the
                                  white price without going dim (Y ~0.44 vs 1.0) */
  --text-tertiary: #A5A7AB;    /* product size/volume — Lc −52 */
  --text-muted: #9A9CA1;       /* footer — Lc −48 */
  --text-on-header: #C9D5FF;   /* inactive tabs on --header-bg — Lc −62 */
  --text-on-accent: #EFF2FF;   /* active tab on --accent */
  --text-inverse: #000000;     /* black text on --surface-inverse (order bar) */
  --error: #FF6B6B;
  --danger: #E5484D;           /* destructive: swipe-to-delete reveal */

  /* Misc */
  --handle: #6E7278;           /* basket drag handle */
  --scroll-fade: #0F1219;      /* basket scroll-shadow (darker shade of surface-0) */
  --overlay: rgba(0, 0, 0, 0.8);                   /* basket backdrop */
  --shadow-order: 0 8px 24px rgba(0, 0, 0, 0.25);  /* floating order bar */

  --radius-xs: 4px;   /* nested-radius fill: outer(16) − padding(12) = 4, maga-spacing-hierarchy */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 44px;

  /* Motion — strengthened easings (maga-motion; the built-in CSS curves are too
     weak). Appearing/disappearing = ease-out; iOS-like sheets/snaps = drawer. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

    body {
      margin: 0;
      padding-bottom: 16px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      font-family: var(--font-family);
      background: var(--surface-0);
      color: var(--text-primary);
      overflow-x: hidden;
    }

    *, *::before, *::after {
      box-sizing: border-box;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    body.loading {
      visibility: hidden;
    }

    /* h1 (22px) and .updated (12px) removed — neither appears in any club's
       markup or in the JS. Their orphan sizes are gone from the scale. */

    .error {
      color: var(--error);
      font-size: var(--font-caption);
    }

.site-footer {
  width: 100%;
  padding: 24px 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface-0);
  /* --text-muted (#9A9CA1) on --surface-0 is Lc −48 — de-emphasised but legible.
     Was #626469 = Lc −21 (Not Readable). See maga-shared/apca-contrast. */
  color: var(--text-muted);
  font-size: var(--font-caption);
  line-height: var(--lh-caption);
  text-align: center;
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer .ig-handle {
  color: var(--text-primary);
}