/* Design tokens — provisional palette until /replica-design and /replica-brand run.
   Components must only reference these variables, never raw values. */
:root {
  /* Color */
  --color-bg: #0d0e12;
  --color-bg-elev: #14161c;
  --color-surface: #1b1e26;
  --color-surface-2: #232733;
  --color-border: #2c303c;
  --color-text: #f4f2ed;
  --color-text-muted: #a9abb6;
  --color-text-faint: #747886;
  --color-accent: #ff7a45;
  --color-accent-strong: #ff5f22;
  --color-accent-soft: rgba(255, 122, 69, 0.14);
  --color-on-accent: #1d0c04;
  --color-success: #7ce3b6;
  --color-success-soft: rgba(124, 227, 182, 0.14);
  --color-info: #6aa8ff;
  --color-glow: rgba(255, 122, 69, 0.22);
  --color-overlay: rgba(13, 14, 18, 0.72);
  --color-white: #ffffff;
  --color-ink: #121318;

  /* Sample pass colors (demo businesses) */
  --pass-barber: #1f2a44;
  --pass-store: #7a3e9d;
  --pass-cafe: #6b4226;
  --pass-gym: #0f6e6e;
  --pass-text: #fdfcf9;

  /* Map */
  --map-ground: #e9e6df;
  --map-street: #ffffff;
  --map-block: #dcd8cf;
  --map-park: #b9dcb0;
  --map-water: #a9cdea;
  --map-label: #5f6170;
  --map-fence: rgba(255, 122, 69, 0.18);
  --map-fence-line: rgba(255, 95, 34, 0.7);
  --map-walker: #2563eb;

  /* Channels */
  --ch-email-bg: #f7f6f2;
  --ch-email-text: #1d1e24;
  --ch-wa-bg: #0b141a;
  --ch-wa-in: #1f2c34;
  --ch-wa-out: #005c4b;
  --ch-ms-bg: #ffffff;
  --ch-ms-in: #eceef2;
  --ch-ms-out: #0a7cff;
  --ch-ig-bg: #000000;
  --ch-ig-in: #262626;
  --ch-ig-out: #7b4dff;

  /* Typography */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: clamp(2rem, 4vw, 2.75rem);
  --fs-hero: clamp(2.4rem, 7vw, 5rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --gutter: 16px;
  --container: 1160px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent);

  /* Sizes */
  --nav-h: 64px;
  --phone-w: 260px;
  --phone-h: 520px;
  --pass-w: 220px;
  --pass-h: 300px;
  --qr-size: 84px;
  --stamp-size: 34px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 700ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}