/* ================================================================
   AVENGERHUB DESIGN TOKENS v2.0
   Premium Dark Cyberpunk — Digital Products E-commerce
   ================================================================ */

:root {

  /* ── COLORS: Dark Palette ──────────────────────────────────── */

  /* Backgrounds — layered depth system */
  --av-color-bg:             #080b12;
  --av-color-bg-alt:         #0c1019;
  --av-color-surface:        #111827;
  --av-color-surface-raised: #1a2235;
  --av-color-surface-glass:  rgba(17, 24, 39, 0.65);

  /* Borders */
  --av-color-border:         rgba(99, 102, 241, 0.12);
  --av-color-border-hover:   rgba(99, 102, 241, 0.35);

  /* Accent: Indigo / Purple spectrum */
  --av-color-accent:         #6366f1;
  --av-color-accent-hover:   #818cf8;
  --av-color-accent-soft:    rgba(99, 102, 241, 0.15);
  --av-color-accent-glow:    rgba(99, 102, 241, 0.45);

  /* Secondary: Cyan / Teal — tech feel */
  --av-color-secondary:      #06b6d4;
  --av-color-secondary-glow: rgba(6, 182, 212, 0.40);

  /* CTA: Emerald green — "buy now" */
  --av-color-cta:            #22c55e;
  --av-color-cta-hover:      #16a34a;
  --av-color-cta-glow:       rgba(34, 197, 94, 0.35);

  /* Text */
  --av-color-text:           #e2e8f0;
  --av-color-text-soft:      #94a3b8;
  --av-color-muted:          #64748b;
  --av-color-heading:        #f1f5f9;

  /* Pricing */
  --av-color-price:          #22c55e;
  --av-color-price-original: #64748b;
  --av-color-sale-badge:     #ef4444;

  /* Semantic */
  --av-color-success:        #22c55e;
  --av-color-warning:        #f59e0b;
  --av-color-destructive:    #ef4444;
  --av-color-info:           #06b6d4;
  --av-color-overlay:        rgba(8, 11, 18, 0.90);

  /* Gradients */
  --av-gradient-hero:        linear-gradient(135deg, #080b12 0%, #0f172a 50%, #1e1b4b 100%);
  --av-gradient-card:        linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(6,182,212,0.05) 100%);
  --av-gradient-accent:      linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
  --av-gradient-cta:         linear-gradient(135deg, #22c55e 0%, #059669 100%);
  --av-gradient-text:        linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
  --av-gradient-glow:        radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.15) 0%, transparent 60%);

  /* ── TYPOGRAPHY ────────────────────────────────────────────── */

  --av-font-heading:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --av-font-primary:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --av-font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale — modular (1.25 ratio) */
  --av-text-xs:    0.75rem;   /* 12px */
  --av-text-sm:    0.8125rem; /* 13px */
  --av-text-base:  0.9375rem; /* 15px */
  --av-text-md:    1.0625rem; /* 17px */
  --av-text-lg:    1.25rem;   /* 20px */
  --av-text-xl:    1.5rem;    /* 24px */
  --av-text-2xl:   1.875rem;  /* 30px */
  --av-text-3xl:   2.25rem;   /* 36px */
  --av-text-4xl:   3rem;      /* 48px */
  --av-text-5xl:   3.75rem;   /* 60px */

  --av-leading-tight:  1.15;
  --av-leading-snug:   1.3;
  --av-leading-normal: 1.6;

  /* ── SPACING (8px base grid) ───────────────────────────────── */

  --av-spacing-xs:  4px;
  --av-spacing-sm:  8px;
  --av-spacing-md:  16px;
  --av-spacing-lg:  24px;
  --av-spacing-xl:  32px;
  --av-spacing-2xl: 48px;
  --av-spacing-3xl: 64px;
  --av-spacing-4xl: 96px;
  --av-spacing-5xl: 128px;

  /* ── BORDER RADIUS ─────────────────────────────────────────── */

  --av-radius-none: 0;
  --av-radius-sm:   6px;
  --av-radius-md:   10px;
  --av-radius-lg:   14px;
  --av-radius-xl:   20px;
  --av-radius-2xl:  28px;
  --av-radius-full: 9999px;

  /* ── SHADOWS & GLOWS ───────────────────────────────────────── */

  --av-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.25);
  --av-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.35);
  --av-shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.45);
  --av-shadow-xl:    0 20px 60px rgba(0, 0, 0, 0.6);
  --av-shadow-glow:  0 0 20px var(--av-color-accent-glow);
  --av-shadow-glow-cta: 0 0 20px var(--av-color-cta-glow);
  --av-shadow-glow-cyan: 0 0 20px var(--av-color-secondary-glow);

  /* ── GLASS ─────────────────────────────────────────────────── */

  --av-glass-blur:   blur(16px);
  --av-glass-heavy:  blur(24px);
  --av-glass-bg:     rgba(17, 24, 39, 0.60);
  --av-glass-border: rgba(99, 102, 241, 0.10);

  /* ── TRANSITIONS ───────────────────────────────────────────── */

  --av-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --av-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --av-duration-fast:   150ms;
  --av-duration-normal: 250ms;
  --av-duration-slow:   400ms;
  --av-transition:      all var(--av-duration-normal) var(--av-ease-out);

  /* ── Z-INDEX SCALE ─────────────────────────────────────────── */

  --av-z-dropdown:  100;
  --av-z-sticky:    200;
  --av-z-overlay:   300;
  --av-z-modal:     400;
  --av-z-toast:     500;

  /* ── LAYOUT ────────────────────────────────────────────────── */

  --av-container-max: 1280px;
  --av-container-wide: 1440px;
  --av-header-height: 72px;
}

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --av-duration-fast:   0ms;
    --av-duration-normal: 0ms;
    --av-duration-slow:   0ms;
  }
}