/* Shop design tokens: the only place a size, space, radius, shadow or timing
   is chosen. Everything else in the shop refers to these.

   Type and space are fluid (Utopia-style): each value grows linearly from a
   360px to a 1240px viewport and holds outside it. Colours come from the
   theme (themes.css) and the event's accent; fonts from fonts.css.

   CUBE CSS: tokens → global → compositions → utilities → blocks, loaded in
   that order after the legacy Tachyons styles (see application/_shop_head). */

:root {
  /* ── Type scale ───────────────────────────────────────────────────────────
     -2 is the smallest text anywhere in the shop (13px): legal small print,
     counters. -1 is secondary text, 0 body copy, 1–2 card and section
     titles, 3–6 page and event titles. */
  --step--2: 0.8125rem;
  --step--1: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --step-0: clamp(1rem, 0.9744rem + 0.1136vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.1477rem + 0.4545vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.3466rem + 0.6818vw, 1.875rem);
  --step-4: clamp(1.75rem, 1.4943rem + 1.1364vw, 2.375rem);
  --step-5: clamp(2.125rem, 1.767rem + 1.5909vw, 3rem);
  --step-6: clamp(2.5rem, 1.9886rem + 2.2727vw, 3.75rem);

  --leading-flat: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-loose: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;

  /* Faces: Geist until a look picks its own (fonts.css sets them per
     [data-heading-font] and [data-body-font]); codes and numbers to read
     out, like vouchers and booking references, in Geist Mono */
  --font-body: "Geist", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-display-weight: 700;
  --font-display-tracking: -0.035em;
  --font-display-adjust: none;
  --font-display-width: 0.56;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --measure: 65ch;

  /* ── Space scale ──────────────────────────────────────────────────────────
     Single steps hold their size; one-up pairs (s-m, m-l …) stretch from the
     smaller value on phones to the larger on desktops, for gutters and the
     gaps between sections. */
  --space-3xs: 0.25rem;
  --space-2xs: clamp(0.5rem, 0.4744rem + 0.1136vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7244rem + 0.1136vw, 0.8125rem);
  --space-s: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4233rem + 0.3409vw, 1.6875rem);
  --space-l: clamp(2rem, 1.8977rem + 0.4545vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8466rem + 0.6818vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.7955rem + 0.9091vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.6932rem + 1.3636vw, 6.75rem);

  --space-2xs-xs: clamp(0.5rem, 0.3722rem + 0.5682vw, 0.8125rem);
  --space-xs-s: clamp(0.75rem, 0.5966rem + 0.6818vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.7188rem + 1.25vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.1932rem + 1.3636vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.4375rem + 2.5vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.3864rem + 2.7273vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 2.875rem + 5vw, 6.75rem);

  --gutter: var(--space-s-m);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --wrapper-max: 72rem;
  --column-content: 48rem;
  --column-narrow: 34rem;
  --header-height: 4rem;
  /* The purchase sidebar on a desktop: tickets, the seat choice, the order */
  --sidebar-width: 26rem;

  /* ── Shape ────────────────────────────────────────────────────────────────
     Controls round with the theme's shape; pills for buttons and chips. */
  --radius-xs: 0.375rem;
  --radius-s: 0.625rem;
  --radius-m: 0.875rem;
  --radius-l: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  --border-width: 1px;

  /* ── Elevation ────────────────────────────────────────────────────────────
     --shadow-card comes from the theme; raised lifts a floating control,
     overlay a popover or dialog above the page. */
  --shadow-raised: 0 1px 2px oklch(0 0 0 / 0.08), 0 12px 32px -12px oklch(0 0 0 / 0.35);
  --shadow-overlay: 0 24px 60px -20px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(1 0 0 / 0.06);

  /* ── Focus ────────────────────────────────────────────────────────────────
     --focus-ring-color comes from the accent (themes.css). */
  --focus-ring-width: 3px;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ── Stacking ─────────────────────────────────────────────────────────── */
  --z-raised: 1;
  --z-nav: 50;
  --z-dock: 100;
  --z-overlay: 1000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}