/* ============================================================
   THE MEP SHOP — TYPOGRAPHY TOKENS
   Display & UI : Archivo (industrial grotesque — echoes the heavy,
                  squared wordmark)
   Mono / specs : IBM Plex Mono (part numbers, SKUs, kW/specs)
   Fonts are loaded from Google Fonts in fonts.css.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-sans:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */
  --fw-black:    900; /* @kind font */ /* headline / wordmark weight */

  /* ---- Type scale (rem, 16px base) ---- */
  --text-3xs: 0.6875rem;  /* 11 — micro labels */
  --text-2xs: 0.75rem;    /* 12 — eyebrow, meta */
  --text-xs:  0.8125rem;  /* 13 — captions, fine print */
  --text-sm:  0.875rem;   /* 14 — UI, secondary body */
  --text-base:1rem;       /* 16 — body */
  --text-md:  1.125rem;   /* 18 — lead body */
  --text-lg:  1.375rem;   /* 22 — card titles */
  --text-xl:  1.75rem;    /* 28 — section sub-heads */
  --text-2xl: 2.25rem;    /* 36 — section heads */
  --text-3xl: 3rem;       /* 48 — page titles */
  --text-4xl: 3.75rem;    /* 60 — hero */
  --text-5xl: 4.75rem;    /* 76 — display hero */

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.06em;   /* eyebrows / caps labels */
  --tracking-widest:  0.14em;   /* spaced micro-caps */

  /* ============================================================
     SEMANTIC TYPE ROLES
     ============================================================ */
  --type-hero-size: var(--text-5xl);
  --type-hero-weight: var(--fw-black);
  --type-hero-leading: var(--leading-none);
  --type-hero-tracking: var(--tracking-tight);

  --type-display-size: var(--text-3xl);
  --type-display-weight: var(--fw-extra);

  --type-h1-size: var(--text-2xl);
  --type-h2-size: var(--text-xl);
  --type-h3-size: var(--text-lg);

  --type-body-size: var(--text-base);
  --type-body-leading: var(--leading-relaxed);

  /* Eyebrow / section kicker — caps, spaced, often blue */
  --type-eyebrow-size: var(--text-2xs);
  --type-eyebrow-weight: var(--fw-bold);
  --type-eyebrow-tracking: var(--tracking-widest);

  /* Technical / spec label */
  --type-spec-family: var(--font-mono);
  --type-spec-size: var(--text-xs);
  --type-spec-tracking: var(--tracking-wide);
}