/* Nexora Design System Tokens */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Fonts */
  --font-heading: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Color Palette - Cyber-Luxe Dark Vibe */
  --bg-deep: #070911;        /* Deep Space Black - base canvas */
  --bg-main: #0c0f1d;        /* Midnight Dark - page backgrounds */
  --bg-card: #14192b;        /* Slate Card - surface containers */
  --bg-card-hover: #1b223a;  /* Elevated Card - hover surface */
  --bg-input: #101424;       /* Dark Input fields */

  /* Text Colors */
  --text-primary: #ffffff;   /* Pure White - headings */
  --text-secondary: #94a3b8; /* Cool Grey - descriptions & subtexts */
  --text-muted: #64748b;     /* Slate Grey - metadata, disabled text */
  --text-dark: #0f172a;      /* Deepest Slate - contrast labels */

  /* Branding Accents */
  --color-primary: #8b5cf6;       /* Electric Purple - primary action buttons, highlights */
  --color-primary-rgb: 139, 92, 246;
  --color-primary-hover: #7c3aed; /* Deep Violet - hover states */
  --color-accent: #a78bfa;        /* Glowing Lilac - badges, borders */
  --color-glow: #c084fc;          /* Neon Magenta-Violet - subtle glows */
  --color-silver: #cbd5e1;        /* Metallic Silver - premium secondary items */
  --color-silver-dark: #64748b;   /* Brushed Silver - secondary hover */

  /* UI feedback states */
  --color-success: #10b981;  /* Emerald - checkouts, discounts, success toast */
  --color-error: #ef4444;    /* Crimson - validation error, out of stock */
  --color-warning: #f59e0b;  /* Amber - notifications */

  /* Structural Variables */
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --border-radius-full: 9999px;

  /* Interactive / Animations */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-elastic: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Shadows and Glows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(139, 92, 246, 0.1);
  --glow-purple: 0 0 15px rgba(139, 92, 246, 0.5);
  --glow-purple-strong: 0 0 25px rgba(139, 92, 246, 0.8), 0 0 10px rgba(139, 92, 246, 0.4);
  --glow-border: 1px solid rgba(139, 92, 246, 0.2);
  --glow-border-hover: 1px solid rgba(139, 92, 246, 0.45);
  
  /* Layout Sizing */
  --max-width-container: 1200px;
  --max-width-narrow: 800px;
  --header-height: 80px;
}

/* Base resets across pages */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  color: var(--text-secondary);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.25;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}