/* ============================================
   DESIGN TOKENS — Premium Electronics Store
   Apple-inspired cold luxury palette
   ============================================ */

:root {
  /* ── Palette ── */
  --color-void:        #000000;
  --color-obsidian:    #0a0a0a;
  --color-carbon:      #1d1d1f;
  --color-graphite:    #2d2d2f;
  --color-steel:       #424245;
  --color-titanium:    #86868b;
  --color-silver:      #a1a1a6;
  --color-platinum:    #d2d2d7;
  --color-frost:       #f5f5f7;
  --color-ice:         #fbfbfd;
  --color-white:       #ffffff;

  /* Accent — cold blue highlight */
  --color-accent:      #2997ff;
  --color-accent-glow: rgba(41, 151, 255, 0.15);
  --color-accent-deep: #0071e3;

  /* ── Typography ── */
  --font-display:  'Outfit', -apple-system, 'Helvetica Neue', sans-serif;
  --font-body:     'DM Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', monospace;

  --fs-mega:   clamp(3.2rem, 8vw, 7.5rem);
  --fs-hero:   clamp(2.4rem, 5vw, 5rem);
  --fs-h1:     clamp(2rem, 3.5vw, 3.5rem);
  --fs-h2:     clamp(1.6rem, 2.8vw, 2.8rem);
  --fs-h3:     clamp(1.2rem, 2vw, 1.8rem);
  --fs-body:   clamp(0.95rem, 1.2vw, 1.125rem);
  --fs-small:  clamp(0.8rem, 1vw, 0.875rem);
  --fs-micro:  0.75rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-tight:    1.05;
  --lh-heading:  1.15;
  --lh-body:     1.6;

  --ls-tight:   -0.03em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-ultra:    0.2em;

  /* ── Spacing Scale ── */
  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    2rem;
  --space-lg:    4rem;
  --space-xl:    6rem;
  --space-2xl:   10rem;
  --space-3xl:   16rem;

  /* ── Layout ── */
  --max-width:       1200px;
  --max-width-wide:  1440px;
  --max-width-text:  680px;
  --gutter:          clamp(1.25rem, 4vw, 3rem);
  --section-padding: clamp(5rem, 12vh, 10rem);

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-subtle:  0 2px 20px rgba(0,0,0,0.06);
  --shadow-medium:  0 8px 40px rgba(0,0,0,0.12);
  --shadow-heavy:   0 20px 80px rgba(0,0,0,0.25);
  --shadow-glow:    0 0 60px var(--color-accent-glow);

  /* ── Transitions ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  0.2s;
  --duration-base:  0.4s;
  --duration-slow:  0.8s;
  --duration-crawl: 1.2s;

  /* ── Glass ── */
  --glass-bg:     rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   20px;
}