/* Design tokens, Marquee theme. Single source of truth for the guest
   front end: every component stylesheet consumes these custom properties
   and nothing else (no raw hex or magic sizes in component CSS).
   Vocabulary follows the design-system iterations (wip/design/
   guest-experience): accent, garnet, ink scale, surface scale,
   radius-card/ctl/pill/photo, font-display/font-ui. */
:root {
  /* ---- color: surfaces ---- */
  --surface: #141519;            /* page background */
  --surface-2: #1b1c22;          /* raised panels, fields */
  --surface-viewer: #0b0c0f;     /* photo viewer backdrop, darker than surface */
  --photo-well: #1d1812;         /* empty photo frame before pixels arrive */

  /* ---- color: ink ---- */
  --ink: #F3E7DE;                /* primary text */
  --ink-2: #b9bac2;              /* secondary text */
  --ink-3: #8b8e98;              /* tertiary text, fine print */

  /* ---- color: brand ---- */
  --accent: #D9AB54;             /* marquee gold */
  --accent-2: #E4BE74;           /* gold, lifted (active/hover) */
  --accent-ink: #16120e;         /* text set on accent fills */
  --garnet: #8F0047;             /* deep red, errors and destructive marks */
  --garnet-ink: #e08aa8;         /* readable garnet for text on dark surfaces */

  /* ---- color: washes and materials (translucent, layered on photos) ---- */
  --accent-soft-border: rgba(228, 203, 150, .18);  /* hairline borders */
  --hairline-wash: rgba(228, 203, 150, .14);       /* progress track */
  --accent-wash: rgba(217, 171, 84, .07);          /* tinted panel fill */
  --shimmer-wash: rgba(217, 171, 84, .12);         /* skeleton shimmer band */
  --pulse-ring: rgba(217, 171, 84, .55);           /* arrived-photo pulse start */
  /* Glass material (2026-07-15 handoff): lighter fills + heavier, saturated
     blur so floating chrome reads as frosted glass OVER the photo, not a
     solid panel. Legibility comes from the blur, not the fill. */
  --glass: rgba(27, 28, 34, .5);                   /* floating glass controls */
  --glass-strong: rgba(27, 28, 34, .72);           /* content-bearing glass panels (prices, CTAs) */
  --glass-soft: rgba(27, 28, 34, .42);             /* quiet chip fills */
  --glass-saturate: 160%;                          /* backdrop saturation: lets the photo's color glow through the frost */
  --glass-edge: rgba(243, 231, 222, .1);           /* inner top highlight, the "lit edge" of the glass */
  --dim-wash: rgba(20, 21, 25, .25);               /* selection-mode tile dim */
  --garnet-wash: rgba(143, 0, 71, .35);            /* marked-not-mine tile fill */
  --scrim: rgba(8, 8, 10, .6);                     /* sheet backdrop */
  --blur-glass: 20px;                              /* floating glass material */
  --blur-glass-strong: 26px;                       /* content-bearing glass panels: heavier frost carries the legibility the lighter fill gave up */
  --blur-veil: 3px;                                /* sheet backdrop soften */
  --blur-placeholder: 14px;                        /* blur-up micro-placeholder */
  --sheet-tint-top: rgba(46, 26, 32, .97);         /* checkout sheet gradient */
  --sheet-tint-bottom: rgba(27, 28, 34, .98);
  --shadow-badge: 0 1px 6px rgba(0, 0, 0, .45);

  /* Action hierarchy (2026-07-15 handoff): actions look lit, messages stay
     flat. Literal values here; the @supports block below re-derives the
     accent-tinted ones via color-mix so a per-venue accent swap re-tints
     glow and control borders automatically (iOS Safari < 16.2 keeps the
     literals — same rendered result for the Marquee gold). */
  --cta-edge: rgba(255, 255, 255, .25);            /* lit inner top edge of the primary CTA */
  --shadow-cta: 0 4px 16px rgba(217, 171, 84, .22); /* accent glow lifting the primary off the glass (= accent at 22%) */
  --border-ctl: rgba(228, 190, 116, .32);          /* control border: stronger than the hairline wash so secondary actions read as controls, not messages (= accent-2 at 32%) */

  /* ---- type ---- */
  /* Brand faces (fonts.css @font-face, self-hosted); the stand-ins keep
     first paint honest while the woff2 files arrive. */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Montserrat', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
  /* Guest display scale per iteration 07 round 4: 42 hero, 34 section. */
  --type-hero: 42px;
  --type-section: 34px;
  --type-title: 20px;            /* card/sheet serif titles */
  --type-title-lg: 24px;
  --type-field: 22px;            /* code entry digits */
  --type-cta: 16px;
  --type-body: 15px;
  --type-ui: 14px;
  --type-note: 13px;
  --type-fine: 12px;
  --type-kicker: 12px;
  --kicker-tracking: .18em;
  --code-tracking: .12em;

  /* ---- radii ---- */
  --radius-card: 16px;
  --radius-ctl: 12px;
  --radius-pill: 100px;
  --radius-photo: 6px;

  /* ---- spacing ---- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --gap-grid: 10px;              /* photo grid gutter */
  --pad-side: 24px;              /* unified side padding (iteration 07 round 4) */
  --inset-floating: 12px;        /* floating glass cluster inset from edges */

  /* ---- tap targets (HIG audit, iteration 07 round 3: 44 minimum, 52 controls) ---- */
  --tap-min: 44px;
  --ctl-h: 52px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --dur-quick: 260ms;            /* placeholder fade, bar collapse (enter) */
  --dur-exit: 160ms;             /* outgoing layer of a crossfade; shorter than enter so two glass layers never co-exist at mid-opacity */
  --shift-swap: 4px;             /* vertical offset of a crossfading layer (was 8px via --space-xs) */
  --dur-reveal: 480ms;           /* thumbnail crossfade */
  --dur-tile: 450ms;             /* tile entrance */
  --dur-settle: 700ms;           /* sharp-image scale settle */
  --dur-sheet: 320ms;            /* checkout sheet rise */
  --dur-toast: 350ms;
  --dur-pulse: 900ms;            /* arrived-photo pulse */
  --dur-ambient: 1.2s;           /* venue ambiance fade */
  --stagger-step: 45ms;          /* per-tile entrance stagger */
}

/* Accent derivation (design follow-up, 2026-07-15 handoff note 10): where a
   token is literally "the accent at some alpha", derive it from --accent so
   a per-venue accent swap re-tints everything in one place. Browsers
   without color-mix keep the identical literals above. The hairline washes
   (--accent-soft-border, --hairline-wash) stay literal: they sit on a
   lighter parchment tone, not the accent itself. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --shadow-cta: 0 4px 16px color-mix(in srgb, var(--accent) 22%, transparent);
    --border-ctl: color-mix(in srgb, var(--accent-2) 32%, transparent);
    --accent-wash: color-mix(in srgb, var(--accent) 7%, transparent);
    --shimmer-wash: color-mix(in srgb, var(--accent) 12%, transparent);
    --pulse-ring: color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

/* Kiosk (2026-07-15 handoff, ACTION-DOCK doctrine): large shared touch
   screens scale the action surfaces up via tokens only — same DOM, no
   per-device markup. Width alone is not enough (a desktop monitor is not
   a kiosk); the coarse pointer is the tell. */
@media (min-width: 1400px) and (pointer: coarse) {
  :root {
    --ctl-h: 64px;
    --type-cta: 20px;
    --inset-floating: 24px;
  }
}