/* ============================================================
   variables.css
   All colours, sizes, and design tokens live here.
   Change a value here and it updates everywhere on the site.
   ============================================================ */

:root {
  /* ── Brand Gold ── */
  --gold:        #c9a84c;
  --gold-light:  #e8c97a;
  --gold-dark:   #8a6820;

  /* ── Backgrounds ── */
  --bg-deep:     #0a0a0f;   /* page background */
  --bg-card:     #11111a;   /* card / panel background */
  --bg-surface:  #16161f;   /* slightly lighter surface */
  --bg-surface2: #1e1e2a;   /* input backgrounds */

  /* ── Text ── */
  --text:        #e8e0d0;
  --text-muted:  #9a9080;

  /* ── Borders ── */
  --border:      rgba(201, 168, 76, 0.22);

  /* ── Game type colours ── */
  --pokemon:     #e84040;
  --mtg:         #4a7fb5;

  /* ── Venue / café ── */
  --cafe:        #d4956a;
  --cafe-bg:     #0f0c08;
  --cafe-surface:#1a1510;

  /* ── Status ── */
  --ok:          #22c55e;
  --error:       #ef4444;
  --warn:        #f59e0b;

  /* ── Layout ── */
  --nav-height:  62px;
  --mob-tab-h:   60px;
  --radius:      8px;
  --radius-lg:   14px;

  /* ── Safe areas (notched phones) ── */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}