/* ============================================================
   ARMOR POWER — Colors & Type
   Rugged American power equipment brand.
   Industrial, tactical, built-tough.
   ------------------------------------------------------------
   Fonts are loaded from Google Fonts as NEAREST MATCHES to the
   brand's custom italic wordmark. See README "Typography".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Saira:wght@400;500;600;700;800&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Chakra+Petch:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --ap-orange:        #E8531E;  /* Power Orange — primary. Pantone 021 C reference */
  --ap-orange-bright: #FF6A2C;  /* hover / lit accent */
  --ap-orange-deep:   #C53F12;  /* pressed / shadow orange */
  --ap-black:         #161416;  /* Armor Black — near-black, faintly warm */
  --ap-ink:           #1E1B1C;  /* primary text on light */
  --ap-white:         #FFFFFF;

  /* ---------- STEEL / NEUTRALS (generator housing) ---------- */
  --ap-steel-50:  #F4F5F6;  /* off-white panel */
  --ap-steel-100: #E6E8EA;
  --ap-steel-200: #D2D6DA;  /* light housing */
  --ap-steel-300: #B4BAC1;
  --ap-steel-400: #8A9099;  /* mid steel */
  --ap-steel-500: #5F656D;
  --ap-steel-600: #444A51;
  --ap-steel-700: #33373D;  /* dark panel */
  --ap-steel-800: #232629;  /* charcoal */
  --ap-steel-900: #161719;  /* gunmetal */

  /* ---------- SEMANTIC (drawn from product warning system) ---------- */
  --ap-danger:   #C8281E;  /* DANGER red label */
  --ap-danger-bg:#FBE9E7;
  --ap-caution:  #F4B400;  /* CAUTION amber label */
  --ap-caution-bg:#FFF6DD;
  --ap-success:  #2E9E4F;  /* eco / running indicator green */
  --ap-success-bg:#E6F4EB;
  --ap-info:     #2D7DD2;  /* natural-gas / info blue */
  --ap-info-bg:  #E7F0FA;

  /* ---------- FUEL-TYPE ACCENTS (tri-fuel system) ---------- */
  --ap-fuel-gas:     #C8281E;  /* gasoline — red */
  --ap-fuel-propane: #2E9E4F;  /* propane / LPG — green */
  --ap-fuel-natgas:  #2D7DD2;  /* natural gas — blue */

  /* ---------- TEXT TOKENS ---------- */
  --ap-fg-1: #1E1B1C;  /* primary on light */
  --ap-fg-2: #4A4E54;  /* secondary on light */
  --ap-fg-3: #757B83;  /* tertiary / muted */
  --ap-fg-on-dark-1: #FFFFFF;
  --ap-fg-on-dark-2: #B4BAC1;
  --ap-fg-on-dark-3: #80868E;

  /* ---------- SURFACES ---------- */
  --ap-surface:        #FFFFFF;
  --ap-surface-sunken: #F4F5F6;
  --ap-surface-dark:   #161719;
  --ap-surface-panel:  #232629;
  --ap-hairline:       #E0E3E6;
  --ap-hairline-dark:  #34383D;

  /* ---------- TYPE FAMILIES ---------- */
  --ap-font-display: 'Saira Condensed', 'Arial Narrow', sans-serif; /* rugged condensed headlines */
  --ap-font-heading: 'Saira', 'Arial', sans-serif;                  /* squared technical headings */
  --ap-font-body:    'Barlow', system-ui, sans-serif;               /* readable industrial body */
  --ap-font-tech:    'Chakra Petch', 'Saira', monospace;            /* model #s, spec readouts */

  /* ---------- RADIUS (sharp, machined) ---------- */
  --ap-radius-xs: 2px;
  --ap-radius-sm: 4px;
  --ap-radius-md: 6px;
  --ap-radius-lg: 10px;
  --ap-radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --ap-shadow-sm: 0 1px 2px rgba(22,20,22,.18);
  --ap-shadow-md: 0 4px 14px rgba(22,20,22,.16);
  --ap-shadow-lg: 0 12px 34px rgba(22,20,22,.22);
  --ap-shadow-inset: inset 0 2px 4px rgba(22,20,22,.28);
  --ap-ring-orange: 0 0 0 3px rgba(232,83,30,.35);

  /* ---------- SPACING (4pt grid) ---------- */
  --ap-space-1: 4px;
  --ap-space-2: 8px;
  --ap-space-3: 12px;
  --ap-space-4: 16px;
  --ap-space-5: 24px;
  --ap-space-6: 32px;
  --ap-space-7: 48px;
  --ap-space-8: 64px;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   ============================================================ */

.ap-display {
  font-family: var(--ap-font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ap-ink);
}

.ap-h1 {
  font-family: var(--ap-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.0;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ap-ink);
}

.ap-h2 {
  font-family: var(--ap-font-heading);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ap-ink);
}

.ap-h3 {
  font-family: var(--ap-font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--ap-ink);
}

.ap-eyebrow {
  font-family: var(--ap-font-heading);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-orange);
}

.ap-body {
  font-family: var(--ap-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ap-fg-2);
}

.ap-body-sm {
  font-family: var(--ap-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ap-fg-2);
}

.ap-label {
  font-family: var(--ap-font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ap-fg-3);
}

/* Technical / spec readout — model numbers, wattage, dimensions */
.ap-tech {
  font-family: var(--ap-font-tech);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ap-ink);
  font-variant-numeric: tabular-nums;
}

.ap-spec-number {
  font-family: var(--ap-font-tech);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ap-ink);
  font-variant-numeric: tabular-nums;
}