/* ============================================================
   PPA E-COMMERCE — Design System Tokens (UI/UX Pro Max)
   Style: Industrial Premium Dark + Glassmorphism
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* === COLOR PALETTE === */
  /* Brand */
  --clr-primary:       #FF5A00;   /* PPA Orange */
  --clr-primary-light: #FF7A30;
  --clr-primary-dark:  #D94A00;
  --clr-primary-glow:  rgba(255, 90, 0, 0.25);

  --clr-accent:        #FFB800;   /* Gold accent */
  --clr-accent-glow:   rgba(255, 184, 0, 0.2);

  /* Background Layers */
  --clr-bg:            #F8F9FA;   /* Light gray/white background */
  --clr-bg-2:          #FFFFFF;   /* Cards / sections (pure white) */
  --clr-bg-3:          #F1F3F5;   /* Elevated cards / sub-sections */
  --clr-bg-4:          #E9ECEF;   /* Input fields */

  /* Surface (glassmorphism) */
  --clr-glass:         rgba(255, 255, 255, 0.85); /* Light glass */
  --clr-glass-border:  rgba(0, 0, 0, 0.05);
  --clr-glass-hover:   rgba(255, 90, 0, 0.04);

  /* Text */
  --clr-text:          #1A1D20;   /* Dark text */
  --clr-text-2:        #495057;   /* Secondary text */
  --clr-text-3:        #868E96;   /* Muted text */
  --clr-text-inverse:  #FFFFFF;   /* Text on primary buttons */

  /* Semantic */
  --clr-success:       #00D49A;
  --clr-warning:       #FFB800;
  --clr-error:         #FF4D6A;
  --clr-info:          #38B6FF;

  /* Borders */
  --clr-border:        rgba(0, 0, 0, 0.08);
  --clr-border-hover:  rgba(255, 90, 0, 0.5);

  /* === TYPOGRAPHY === */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

  /* === SPACING === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === BORDER RADIUS === */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.12);
  --shadow-xl:    0 24px 64px rgba(0,0,0,0.15);
  --shadow-glow:  0 0 20px rgba(255, 90, 0, 0.15);
  --shadow-card:  0 2px 8px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02);

  /* === TRANSITIONS === */
  --ease-fast:    150ms ease;
  --ease-normal:  250ms ease;
  --ease-slow:    400ms ease;
  --ease-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === LAYOUT === */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1400px;
  --nav-height:     72px;

  /* === GRADIENTS === */
  --gradient-primary:  linear-gradient(135deg, #FF5A00 0%, #FF7A30 100%);
  --gradient-dark:     linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%);
  --gradient-card:     linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.95) 100%);
  --gradient-hero:     linear-gradient(135deg, rgba(255,90,0,0.08) 0%, rgba(248,249,250,0.9) 50%, rgba(248,249,250,1) 100%);
  --gradient-cta:      linear-gradient(135deg, #FF5A00, #D94A00);
}