/* Phase 8 — design tokens + z-index system (load first) */
:root {
  /* Z-index scale */
  --z-base: 0;
  --z-raised: 1;
  --z-hero-content: 2;
  --z-scroll-hint: 3;
  --z-card-ribbon: 4;
  --z-sticky-browse: 60;
  --z-fab: 85;
  --z-bottom-nav: 90;
  --z-sticky-header: 1000;
  --z-cart-overlay: 1100;
  --z-cart-sheet: 1;
  --z-toast: 1120;

  /* Backgrounds */
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #181818;
  --bg-elevated: #202020;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-muted: #777777;

  /* Accent */
  --accent-gold: #d4af37;
  --accent-soft-gold: #c6a972;
  --accent-light: #f5d38a;

  /* UI */
  --border-soft: rgba(255, 255, 255, 0.08);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.08);

  /* Shadows */
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.15);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Spacing scale (strict) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Typography */
  --font-heading: "Clash Display", "General Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --text-hero: 48px;
  --text-section: 28px;
  --text-product: 18px;
  --text-body: 15px;
  --text-label: 12px;

  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Motion */
  --ease-master: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;

  /* Layout */
  --container-max: 480px;
  --top-nav-height: 72px;
  --top-nav-height-compact: 64px;
  --bottom-nav-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --browse-sticky-offset: var(--top-nav-height);

  /* Cart sheet */
  --cart-sheet-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cart-sheet-dur: 320ms;
  --cart-radius-top: 28px;
  --toast-stack-bottom: calc(var(--bottom-nav-height) + var(--space-12));
}