/* ============================================================
   VARIABLES — Ian's Power Washing Design Tokens
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --color-bg-primary:   #1b3453;   /* Deep navy — cinematic dark stage */
  --color-bg-mid:       #142840;   /* Darker navy — secondary dark bg */
  --color-bg-deep:      #0e1d2c;   /* Deepest — footer bg */
  --color-bg-light:     #f0f4f8;   /* Light blue-white — light sections */
  --color-bg-card:      rgba(255, 255, 255, 0.04);

  --color-accent:       #3682b6;   /* Medium blue — primary CTA accent */
  --color-accent-light: #5aa8d4;   /* Lighter blue — hover state */
  --color-accent-warm:  #d48a45;   /* Warm amber — complementary secondary accent */

  --color-text-primary: #ffffff;   /* White — on dark backgrounds */
  --color-text-muted:   #b0c4d8;   /* Soft blue-gray — muted text on dark */
  --color-text-dark:    #1a2a3a;   /* Near-black — text on light sections */

  --color-border:       rgba(54, 130, 182, 0.20);
  --color-border-faint: rgba(54, 130, 182, 0.08);
  --color-border-card:  rgba(255, 255, 255, 0.06);

  /* ── Typography ── */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;

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

  /* ── Fluid Type Scale ── */
  --size-hero-h1:      clamp(3.5rem, 9vw, 9rem);
  --size-section-h2:   clamp(2rem, 4.5vw, 3.5rem);
  --size-stat-num:     clamp(2.5rem, 5vw, 4rem);
  --size-body:         1rem;
  --size-label:        0.75rem;
  --size-small:        0.85rem;

  /* ── Spacing ── */
  --section-pad:   clamp(70px, 9vw, 130px);
  --container-max: 1280px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);

  /* ── Motion ── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sweep:      cubic-bezier(0.77, 0, 0.175, 1);
  --transition-fast: 150ms ease;
  --transition-mid:  250ms ease;
  --transition-btn:  400ms var(--ease-sweep);

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* ── Shadows ── */
  --shadow-nav:      0 2px 40px rgba(0, 0, 0, 0.4);
  --shadow-card:     0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.35);

  /* ── Glows ── */
  --glow-accent:    0 0 20px rgba(54, 130, 182, 0.4), 0 0 40px rgba(54, 130, 182, 0.2);
  --glow-accent-sm: 0 0 10px rgba(54, 130, 182, 0.3);
  --glow-accent-warm: 0 0 20px rgba(212, 138, 69, 0.3);
}