/* ==========================================================================
   NEXUS STORE — DESIGN TOKENS & PALETTE
   RespectIQ & International E-Commerce Standard (Clean, Solid White Cards, No Dark Gloom, No Emojis)
   ========================================================================== */

:root {
  /* Canvas & Surface Colors — Clean, Crisp, Trustworthy (Like RespectIQ) */
  --bg-main: #f6f8fb;                   /* Clean light gray-blue background */
  --bg-surface: #ffffff;                /* Pure white surface */
  --bg-card: #ffffff;                   /* Solid white cards (no transparency) */
  --bg-card-hover: #ffffff;
  --bg-subtle: #f1f5f9;
  --bg-input: #ffffff;
  
  /* Header & Surfaces */
  --bg-header: #ffffff;                 /* Solid pure white header */
  --bg-topbar: #ffffff;
  --bg-footer: #0f172a;

  /* Brand Accents */
  --color-primary: #5e17eb;             /* Royal Violet / Y7X signature */
  --color-primary-hover: #4d0fd2;
  --color-primary-subtle: #f3e8ff;
  --color-primary-text: #5e17eb;

  --color-accent: #e11d48;              /* Coral Red for Discounts */
  --color-accent-subtle: #ffe4e6;

  --color-gold: #d97706;                /* Amber Gold for Warranty */
  --color-gold-subtle: #fef3c7;

  --color-success: #16a34a;             /* Status Success */
  --color-success-subtle: #dcfce7;

  --color-steam: #0284c7;
  --color-steam-subtle: #e0f2fe;

  /* Typography & Foreground */
  --text-primary: #0f172a;              /* Deep solid slate for maximum readability */
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-white: #ffffff;

  /* Borders & Dividers */
  --border-card: #eef2f6;
  --border-subtle: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-header: rgba(255, 255, 255, 0.1);

  /* Shadows — Natural Depth */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 4px 18px rgba(15, 23, 42, 0.05);
  --shadow-card-hover: 0 14px 30px -4px rgba(15, 23, 42, 0.12);
  --shadow-brand: 0 6px 20px rgba(94, 23, 235, 0.28);

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Fonts */
  --font-arabic: 'Alexandria', 'Cairo', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Alexandria', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout */
  --container-max: 1360px;
  --header-height: 82px;
  --topbar-height: 40px;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}