/* =============================================================
   Squarespace Design System — THEME: Gold / Dark
   Restaurant / luxury dining
   Self-contained: fixed STRUCTURAL tokens + this theme's BRAND layer.
   Default mode for this theme: dark
   Extracted 2026-06-12 from https://project-polished-rat-977.magicpatterns.app/
   ============================================================= */

:root {
  /* ---------- STRUCTURAL: BREAKPOINTS ---------- */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1800px;
  /* ---------- STRUCTURAL: Z-INDEX ---------- */
  --z-background: 0;
  --z-content: 10;
  --z-navbar: 100;
  --z-menu: 200;
  --z-modal: 300;
  --z-tooltip: 400;
  /* ---------- STRUCTURAL: MOTION ---------- */
  --transition-fast: 200ms;
  --transition-standard: 300ms;
  --transition-base: 400ms;
  --transition-slow: 600ms;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  /* ---------- STRUCTURAL: CONTAINERS ---------- */
  --container-narrow: 800px;
  --container-standard: 1200px;
  --container-wide: 1600px;
  /* ---------- STRUCTURAL: FLUID SPACING ---------- */
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(0.75rem, 1.5vw, 1rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
  --space-xl: clamp(2rem, 4vw, 4rem);
  --space-2xl: clamp(3rem, 6vw, 6rem);
  --space-3xl: clamp(4rem, 8vw, 8rem);
  --section-pad-y: 80px;
  --section-pad-x: 40px;
  /* ---------- STRUCTURAL: RADIUS ---------- */
  --radius-sm: 2px;
  --radius-lg: 4px;
  --radius-pill: 9999px;

  /* ===================== BRAND LAYER (Gold / Dark — DARK = default) ===================== */
  --color-background: #0F0F0D;
  --color-surface: #1A1A17;
  --color-text: #F5F3EE;
  --color-text-muted: #B7B7B7;
  --color-heading: #F5F3EE;
  --color-accent: #D4AF37;
  --color-accent-hover: #B8941F;
  --bg-alpha-97: rgba(15,15,13,0.97);
  --accent-alpha-10: rgba(212, 175, 55, 0.10);
  --accent-alpha-20: rgba(212, 175, 55, 0.20);
  --accent-alpha-30: rgba(212, 175, 55, 0.30);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
}

/* ===================== Gold / Dark — LIGHT (opposite mode override) ===================== */
[data-mode="light"] {
  --color-background: #F7F2E7;
  --color-surface: #FFFDF7;
  --color-text: #2A2419;
  --color-text-muted: #6E654F;
  --color-heading: #2A2419;
  --color-accent: #9A7B1E;
  --color-accent-hover: #806413;
  --bg-alpha-97: rgba(247,242,231,0.97);
  --accent-alpha-10: rgba(154, 123, 30, 0.10);
  --accent-alpha-20: rgba(154, 123, 30, 0.20);
  --accent-alpha-30: rgba(154, 123, 30, 0.30);
}

/* Accessible focus ring on every interactive element. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}