/* N.A.J FASHION HOUSE - DESIGN SYSTEM & THEME TOKENS */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand Luxury Palette (Adapted to N.A.J Fashion Logo) */
  --bg-primary: #0a0a0c;
  --bg-surface: #121216;
  --bg-card: #18181f;
  --bg-card-hover: #202029;
  --bg-input: #15151c;
  --bg-glass: rgba(18, 18, 22, 0.88);
  
  /* Metallic Gold Accents (Matched from Logo Hanger & Lettering) */
  --gold-primary: #d4af37;
  --gold-light: #f7d77b;
  --gold-dark: #a3801f;
  --gold-gradient: linear-gradient(135deg, #f7d77b 0%, #d4af37 50%, #9e7921 100%);
  --gold-glow: rgba(212, 175, 55, 0.28);
  --gold-border: rgba(212, 175, 55, 0.45);
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #a3a3b2;
  --text-muted: #727282;
  --text-inverse: #0a0a0c;
  
  /* Functional Colors */
  --accent-crimson: #e11d48;
  --accent-emerald: #10b981;
  --accent-blue: #3b82f6;
  
  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.16);
  --border-focus: var(--gold-primary);
  
  /* Elevation & Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.8);
  --shadow-gold: 0 6px 20px rgba(212, 175, 55, 0.25);
  
  /* Typography */
  --font-heading: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Layout Spacing */
  --header-height: 76px;
  --topbar-height: 38px;
  --container-max: 1360px;
  --container-gutter: 20px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  
  /* Transitions */
  --ease-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 500;
  --z-bottom-nav: 600;
  --z-drawer: 800;
  --z-modal: 1000;
  --z-toast: 1200;
}