/* ============================================================
   Car Parts / автозапчасти — Color & Type Tokens
   carparts.trade — China→CIS auto-parts sourcing
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --carbon-black:   #111111; /* primary ink, logo C, headings */
  --parts-blue:     #1264E8; /* primary CTA, logo P, links, accent */
  --parts-blue-700: #0F4FBA; /* CTA hover/press */
  --parts-blue-50:  #E9F1FE; /* tinted blue surfaces */
  --white:          #FFFFFF;
  --workshop-gray:  #F3F4F6; /* soft section background */
  --border-gray:    #E5E7EB; /* hairline borders, dividers */
  --deep-graphite:  #171717; /* dark sections, footer */

  /* ---------- SEMANTIC ACCENTS (small use only) ---------- */
  --signal-amber:   #FFB000; /* tiny highlights, "new" flags — sparingly */
  --fitment-green:  #16A34A; /* success / "in stock" states only */
  --error-red:      #DC2626; /* form errors only — never a brand accent */

  /* ---------- TEXT ROLES ---------- */
  --fg-1: #111111;           /* primary text */
  --fg-2: #3F4147;           /* secondary text / body */
  --fg-3: #6B7280;           /* muted, captions, labels */
  --fg-on-dark:    #FFFFFF;  /* text on graphite/black */
  --fg-on-dark-2:  #A1A1AA;  /* muted text on dark */
  --fg-on-blue:    #FFFFFF;  /* text on Parts Blue */

  /* ---------- SURFACES ---------- */
  --surface:        #FFFFFF;
  --surface-muted:  #F3F4F6;
  --surface-dark:   #171717;
  --surface-blue:   #1264E8;

  /* ---------- BORDERS / LINES ---------- */
  --border:         #E5E7EB;
  --border-strong:  #D1D5DB;
  --border-dark:    #2A2A2A;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Archivo', 'Inter', 'Segoe UI', system-ui, sans-serif; /* industrial headings */
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;            /* UI + body */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* part numbers, OE codes */

  /* ---------- TYPE SCALE (desktop) ---------- */
  --text-display: 700 56px/1.04 var(--font-display);   /* hero headline */
  --text-h1:      700 40px/1.08 var(--font-display);
  --text-h2:      700 30px/1.14 var(--font-display);
  --text-h3:      600 22px/1.22 var(--font-display);
  --text-lead:    400 19px/1.5  var(--font-body);      /* hero subhead */
  --text-body:    400 16px/1.6  var(--font-body);
  --text-small:   400 14px/1.55 var(--font-body);
  --text-label:   600 13px/1.2  var(--font-body);      /* uppercase eyebrows */
  --text-caption: 500 12px/1.4  var(--font-body);

  --tracking-tight: -0.02em;
  --tracking-label:  0.08em;   /* uppercase eyebrow letter-spacing */

  /* ---------- RADII ---------- */
  --r-sm:  6px;
  --r-md:  10px;   /* buttons, inputs */
  --r-lg:  14px;   /* cards */
  --r-xl:  20px;   /* large feature panels */
  --r-pill: 999px;

  /* ---------- SHADOWS (restrained, industrial) ---------- */
  --shadow-sm: 0 1px 2px rgba(17,17,17,0.06);
  --shadow-md: 0 4px 14px rgba(17,17,17,0.08);
  --shadow-lg: 0 12px 32px rgba(17,17,17,0.12);
  --shadow-blue: 0 6px 18px rgba(18,100,232,0.28); /* on primary CTA */

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --gutter: 24px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
.cp-eyebrow {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--parts-blue);
}
.cp-display { font: var(--text-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.cp-h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.cp-h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.cp-h3 { font: var(--text-h3); color: var(--fg-1); }
.cp-lead { font: var(--text-lead); color: var(--fg-2); }
.cp-body { font: var(--text-body); color: var(--fg-2); }
.cp-small { font: var(--text-small); color: var(--fg-3); }
.cp-mono { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.01em; }