/* =========================================================
   Design tokens — the single source of truth for brand values.
   Override these (e.g. per tenant) without touching any other
   CSS file or any markup.
   ========================================================= */
:root {
  --brand-primary: #0b0d10;
  --brand-primary-light: #1a1d22;
  --brand-secondary: #f5f3ee;
  --brand-accent: #b8935a;
  --brand-accent-dark: #96733f;
  --brand-success: #2e7d4f;
  --brand-danger: #b3432b;

  --text-on-dark: #f5f3ee;
  --text-on-dark-muted: #b7bac0;
  --text-on-light: #14161a;
  --text-on-light-muted: #5b5f66;

  --surface-0: #ffffff;
  --surface-1: #f5f3ee;
  --surface-2: #e9e6dd;
  --border-subtle: #dedad0;

  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --shadow-sm: 0 1px 2px rgba(11, 13, 16, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 13, 16, 0.10);
  --shadow-lg: 0 24px 64px rgba(11, 13, 16, 0.16);

  --transition-fast: 150ms ease;
  --transition-base: 260ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Motion scale for the GSAP-driven layer (animations.js/cursor.js/effects3d.js).
     Durations in seconds (GSAP's native unit); eases mirror GSAP's power2/power3
     curves so CSS and GSAP-driven motion read as one system. */
  --duration-fast: 0.3s;
  --duration-base: 0.6s;
  --duration-slow: 1.1s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --cursor-size: 8px;
  --cursor-ring-size: 36px;
  --cursor-color: var(--brand-accent);

  --container-max: 1280px;

  /* Shared by the floating mobile bottom-nav bar and anything that must
     reserve space above it (body scroll padding, the WhatsApp FAB) — one
     source of truth so the three stay in sync if the bar's size changes. */
  --bottom-nav-height: 64px;
  --bottom-nav-gap: var(--space-3);

  /* Stacking order for layered UI (drawer/mega-menu/toast land here in a later
     phase) — defined now so every future component picks a value from one
     scale instead of inventing ad-hoc z-index numbers. */
  --z-content: 1;
  --z-sticky: 100;
  --z-toast: 200;
  --z-overlay: 300;
  --z-drawer: 400;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --duration-fast: 0.001s;
    --duration-base: 0.001s;
    --duration-slow: 0.001s;
  }
}