/* ==========================================================================
   BODENWALKER DESIGN SYSTEM — DESIGN TOKENS (TOKENS.CSS)
   Clean, Single Unified Luxury Palette: Deep Royal Cobalt & Obsidian
   Typography: Plus Jakarta Sans + Inter
   ========================================================================== */

:root {
  /* Brand Core Palette — Luxe Royal Cobalt & Obsidian */
  --primary: #2563EB;            /* Royal Cobalt Blue — clean, modern, high conversion */
  --primary-deep: #1D4ED8;       /* Deep Cobalt */
  --primary-rgb: 37, 99, 235;
  --primary-glow: rgba(37, 99, 235, 0.22);

  --secondary: #E11D48;          /* Rose Crimson — high urgency for sales & checkout */
  --secondary-deep: #BE123C;
  --secondary-rgb: 225, 29, 72;

  --accent-emerald: #059669;     /* Deep Emerald — Trust, delivery, WhatsApp */
  --accent-amber: #D97706;       /* Warm Ochre / Amber — Bestsellers & highlights */
  --accent-indigo: #4F46E5;      /* Tech / Watches accent */
  --accent-cyan: #0284C7;        /* Clean Cyan */
  --accent-mauve: #7C3AED;       /* Premium Accessories */

  /* Neutral Surfaces (Refined Daylight Slate) */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-alt: #F1F5F9;
  --surface-hover: #E2E8F0;
  --surface-glass: rgba(255, 255, 255, 0.9);

  /* Typography Colors */
  --text: #0F172A;               /* Deep Obsidian for crystal-clear readability */
  --text-muted: #475569;         /* Slate Grey */
  --text-subtle: #94A3B8;        /* Subtle Grey */

  /* Borders & Dividers */
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --chip-alpha: 0.12;
  --header-bg: rgba(255, 255, 255, 0.92);
  --drawer-bg: #FFFFFF;

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 24px rgba(37, 99, 235, 0.22);

  /* Spacing & Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  --header-h: 68px;
  --bottom-nav-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.18s var(--ease);
  --transition-normal: 0.28s var(--ease);

  /* Typography: Plus Jakarta Sans for all headings & UI */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}