/* ═══════════════════════════════════════════════════════════════════════════
   Design tokens — "the store's pocket app"
   Night-lounge warmth: arcade-marquee amber on deep slate, mint for OPEN,
   rose for CLOSED. Alexandria carries both scripts (AR-first product);
   Bricolage Grotesque is reserved for the big ticket numerals.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&display=swap');

:root {
  /* palette — dark is the home theme (lounges live at night) */
  --ink: #101418;
  --ink-2: #171d24;
  --surface: #1a2129;
  --surface-2: #222b35;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f2f4f6;
  --text-2: #9aa7b4;
  --glow: #ffb454;
  --glow-deep: #e8833a;
  --glow-ink: #2a1c08;
  --mint: #3ecf8e;
  --mint-soft: rgba(62, 207, 142, 0.14);
  --rose: #f0566a;
  --rose-soft: rgba(240, 86, 106, 0.14);
  --whatsapp: #25d366;

  --font-body: 'Alexandria', 'Segoe UI', system-ui, sans-serif;
  --font-ticket: 'Bricolage Grotesque', 'Alexandria', system-ui, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 6px 24px rgba(255, 180, 84, 0.35);

  --pad-page: clamp(14px, 4vw, 28px);
  --content-max: 680px;

  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* light theme — cool porcelain, same warm accent */
[data-theme='light'] {
  --ink: #eef1f4;
  --ink-2: #e5e9ee;
  --surface: #ffffff;
  --surface-2: #f4f6f8;
  --line: rgba(16, 20, 24, 0.1);
  --text: #171d24;
  --text-2: #5b6875;
  --glow-ink: #2a1c08;
  --mint-soft: rgba(46, 174, 116, 0.14);
  --rose-soft: rgba(226, 74, 94, 0.12);
  --shadow-card: 0 8px 26px rgba(23, 29, 36, 0.1);
  --shadow-pop: 0 18px 50px rgba(23, 29, 36, 0.18);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

img { max-width: 100%; display: block; }

a { color: var(--glow); }

:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
  border-radius: 4px;
}

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