/* ═══════════════════════════════════════════════════
   ALP DESIGN SYSTEM TOKENS — SINGLE-PRODUCT MASTER
   ─────────────────────────────────────────────────
   Extracted from ALP-Landing-Design-Spec.md & Reverse-
   Engineered 1920px Desktop Master Spec.
   All units, colors, typography, and rhythmic spacings
   are defined here as the single source of visual truth.
   ═══════════════════════════════════════════════════ */

:root {
  /* ── 1. COLOR PALETTE (Spec Section 3) ─────────────────── */
  /* Tone A: Base Deep Black (Header, Hero, Muscles, About) */
  --alp-bg-base:             #0D0D0D;
  --alp-surface-0:           #0D0D0D;

  /* Tone B: Alternate Dark Grey (Features, Specs Outer, Gallery, Footer) */
  --alp-bg-alt:              #141414;
  --alp-surface-1:           #141414;

  /* Nested Card Surface (Specs Inner Card) */
  --alp-bg-card:             #181818;
  --alp-surface-2:           #181818;
  --alp-surface-3:           #1F1F22;

  /* Official Brand Red (Buttons, Eyebrows, Accents, Muscle Highlights) */
  --alp-brand-red:           #8A1F1F;
  --alp-brand-red-hover:     #9E2424;
  --alp-brand-red-active:    #751818;
  --alp-brand-red-gradient:  linear-gradient(180deg, #932A26 0%, #8A1F1F 100%);
  --alp-glow-red:            0 8px 30px rgba(138, 31, 31, 0.35);

  /* Semantic Accent Aliases */
  --alp-accent:              #8A1F1F;
  --alp-accent-hover:        #9E2424;
  --alp-accent-active:       #751818;
  --alp-accent-muted:        rgba(138, 31, 31, 0.15);

  /* Text Colors */
  --alp-text-primary:        #FFFFFF;
  --alp-text-secondary:      #909090;
  --alp-text-faint:          #666666;
  --alp-text:                #FFFFFF;
  --alp-text-muted:          #909090;

  /* Lines & Borders */
  --alp-border-subtle:       #2A2A2A;
  --alp-border-card:         rgba(255, 255, 255, 0.07);
  --alp-line:                rgba(255, 255, 255, 0.08);

  /* ── 2. LAYOUT & SPACING (Spec Section 2 & 6) ───────────── */
  --alp-container-margin-x:  clamp(20px, 3.8vw, 74px);
  --alp-container-max:       1772px;
  --alp-gap-nav-item:        clamp(24px, 3.6vw, 70px);
  --alp-header-height:       120px;

  /* 4px Multiples Spacing Scale */
  --alp-space-1: 4px;
  --alp-space-2: 8px;
  --alp-space-3: 16px;
  --alp-space-4: 24px;
  --alp-space-5: 32px;
  --alp-space-6: 48px;
  --alp-space-7: 64px;
  --alp-space-8: 96px;

  /* ── 3. CORNER RADIUS ───────────────────────────────────── */
  --alp-radius-s:            4px;
  --alp-radius-m:            8px;
  --alp-radius-btn:          8px;
  --alp-radius-card:         12px;
  --alp-radius-pill:         9999px;

  /* ── 4. TYPOGRAPHY (Spec Section 4) ─────────────────────── */
  --alp-font:                'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Measured Font Sizes for Desktop 1920px Scale */
  --alp-fs-h1:               clamp(2.4rem, 4.1vw, 4.8rem);  /* 74-78px @1920 */
  --alp-fs-eyebrow:          clamp(1.0rem, 1.5vw, 1.8rem);  /* 28-30px @1920 */
  --alp-fs-h2:               clamp(1.6rem, 2.2vw, 2.6rem);  /* 40-43px @1920 */
  --alp-fs-h3:               clamp(1.2rem, 1.4vw, 1.6rem);  /* 24-26px @1920 */
  --alp-fs-body-lg:          clamp(1.05rem, 1.25vw, 1.5rem);/* 22-24px @1920 */
  --alp-fs-body:             clamp(0.92rem, 1.05vw, 1.25rem);/* 20-22px @1920 */
  --alp-fs-caption:          clamp(0.8rem, 0.9vw, 1.0rem);
  --alp-fs-label:            clamp(0.7rem, 0.75vw, 0.85rem);

  /* Font Weights */
  --alp-fw-regular:          400;
  --alp-fw-medium:           500;
  --alp-fw-semibold:         600;
  --alp-fw-bold:             700;
  --alp-fw-black:            900;

  /* ── 5. MOTION & EASING ─────────────────────────────────── */
  --alp-ease-default:        cubic-bezier(0.16, 0.84, 0.44, 1);
  --alp-ease-in-out:         cubic-bezier(0.65, 0, 0.35, 1);
  --alp-duration-instant:    120ms;
  --alp-duration-fast:       160ms;
  --alp-duration-base:       200ms;
  --alp-duration-page:       350ms;

  /* ── 6. BACKWARD-COMPATIBILITY ALIASES ──────────────────── */
  --bg:                      var(--alp-bg-base);
  --panel:                   var(--alp-bg-alt);
  --panel-2:                 var(--alp-bg-card);
  --text:                    var(--alp-text-primary);
  --muted:                   var(--alp-text-secondary);
  --line:                    var(--alp-border-card);
  --accent:                  var(--alp-brand-red);
  --accent-2:                var(--alp-brand-red-hover);
  --shadow:                  0 18px 50px rgba(0, 0, 0, 0.45);
  --r:                       var(--alp-radius-btn);

  /* Swatches */
  --swatch-matte-black:      #222222;
  --swatch-cherry-red:       #8A1F1F;
  --swatch-white:            #f5f5f5;
  --swatch-glossy-black:     #111111;
  --swatch-steel-grey:       #9e9e9e;
  --swatch-pro:              linear-gradient(135deg, #222222 50%, #8A1F1F 50%);
}

/* Light Mode Overrides (if toggled) */
html.light-mode {
  --alp-bg-base:             #f4f4f6;
  --alp-surface-0:           #f4f4f6;
  --alp-bg-alt:              #ffffff;
  --alp-surface-1:           #ffffff;
  --alp-bg-card:             #ebebef;
  --alp-surface-2:           #ebebef;
  --alp-text-primary:        #111111;
  --alp-text-secondary:      #666666;
  --alp-text:                #111111;
  --alp-text-muted:          #666666;
  --alp-border-subtle:       rgba(0, 0, 0, 0.09);
  --alp-border-card:         rgba(0, 0, 0, 0.08);
  --alp-line:                rgba(0, 0, 0, 0.09);

  --bg:                      var(--alp-bg-base);
  --panel:                   var(--alp-bg-alt);
  --panel-2:                 var(--alp-bg-card);
  --text:                    var(--alp-text-primary);
  --muted:                   var(--alp-text-secondary);
  --line:                    var(--alp-border-card);
}