/* ==========================================================================
   Legacy City Pub — Design Tokens
   Palette: deep emerald green, warm brass gold accent.
   Signature element: the perforated ticket-stub motif, reused across event
   cards, the ticket type selector, and the final QR confirmation.
   ========================================================================== */

:root {
  /* ---- Color: deep emerald base + warm brass accent ---- */
  --color-bg: #0e1a15;           /* near-black with a deep green undertone */
  --color-surface: #16261f;      /* card / panel surface */
  --color-surface-raised: #1e332a; /* hover / raised surface */
  --color-border: #2a4238;       /* hairline borders on dark surfaces */

  --color-gold: #b8873d;         /* primary accent — warm brass, not neon yellow */
  --color-gold-soft: #8c6a34;    /* muted brass for secondary use, borders, icons */
  --color-rust: #7a3b23;         /* deep rust — reserved for VIP/VVIP tier tags only */

  --color-ink: #f2ede1;          /* primary text on dark — warm ivory */
  --color-ink-muted: #a6b0a9;    /* secondary text, green-tinted gray */
  --color-ink-faint: #6b756e;    /* tertiary / disabled text */

  --color-success: #7fbf8f;      /* mint — "paid" states, brighter than bg for contrast */
  --color-danger: #c0655a;       /* muted brick-red — sold-out / errors */

  /* ---- Type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --text-hero: 700 clamp(2.5rem, 5vw + 1rem, 4.5rem)/1.05 var(--font-display);
  --text-h1: 600 clamp(2rem, 3vw + 1rem, 3rem)/1.1 var(--font-display);
  --text-h2: 600 clamp(1.5rem, 2vw + 1rem, 2rem)/1.2 var(--font-display);
  --text-h3: 600 1.25rem/1.3 var(--font-display);
  --text-body: 400 1rem/1.6 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-label: 600 0.75rem/1.2 var(--font-body);
  --text-mono-num: 500 1rem/1 var(--font-body);

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ---- Radius & motion ---- */
  --radius-card: 14px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-med: 300ms;

  /* ---- The ticket-stub signature ---- */
  --perforation: radial-gradient(
      circle at 8px 8px, transparent 5px, var(--color-bg) 5px
    ) repeat-y;
  --perforation-size: 16px 16px;
}

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