/* =========================================================================
   IRONHEAD FABRICATION — Colors & Type
   Derived from the company mark: dark steel + spark blue + bone white.
   Industrial, blue-collar, no-nonsense.
   ========================================================================= */

/* ---------- Fonts (Google Fonts CDN — see /fonts/README.md if licensing local) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Oswald:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ============== COLORS ============== */

  /* Primary — steel & iron (from the helmet, jacket and "IRONHEAD" wordmark) */
  --iron-950: #0B1018;   /* deepest — hero backgrounds, blackouts */
  --iron-900: #111923;   /* primary dark surface */
  --iron-800: #1A2230;   /* logo navy — body of mark */
  --iron-700: #2A3344;   /* raised dark surface */
  --iron-600: #3D4859;   /* dark border on dark */
  --iron-500: #5A6577;   /* mid steel */
  --iron-400: #828D9F;   /* dim text on dark */
  --iron-300: #B0B8C5;   /* secondary text on light */
  --iron-200: #D6DAE2;   /* hairline / divider */
  --iron-100: #E9ECF1;   /* card on light */
  --iron-50:  #F4F6F9;   /* page background */

  /* Accent — spark blue (the ring outline, "FABRICATION" word, the arc spark) */
  --spark-700: #4A7BA5;
  --spark-600: #5D91BD;
  --spark-500: #82B0D6;  /* brand accent — matches logo */
  --spark-400: #A8C9E5;  /* spark/glow */
  --spark-300: #CDE0EF;
  --spark-100: #EAF2F9;

  /* Hot — controlled ember accent (for emphasis, CTAs in dark contexts).
     Use sparingly — primary brand is steel + blue, this is the welding spark
     in color form. Never use for body text. */
  --ember-600: #C4441F;
  --ember-500: #E25A2D;  /* molten orange */
  --ember-400: #F08A4B;

  /* Bone & paper — off-whites that read as "shop light" not "screen white" */
  --bone-50:  #FBFAF6;   /* paper — primary page bg in light mode */
  --bone-100: #F5F2EC;   /* aged paper — alt panels */
  --bone-200: #ECE7DC;   /* dusty edge */

  /* True white / black */
  --white: #FFFFFF;
  --black: #000000;

  /* Semantic — wired to brand */
  --bg:        var(--bone-50);
  --bg-alt:    var(--bone-100);
  --bg-dark:   var(--iron-900);
  --surface:   var(--white);
  --surface-2: var(--iron-50);

  --fg:        var(--iron-900);       /* primary text on light */
  --fg-2:      var(--iron-700);       /* secondary text */
  --fg-3:      var(--iron-500);       /* tertiary / metadata */
  --fg-inv:    var(--bone-50);        /* text on dark */
  --fg-inv-2:  var(--iron-300);       /* dim text on dark */

  --border:    var(--iron-200);
  --border-strong: var(--iron-800);
  --border-dark:   var(--iron-600);

  --accent:    var(--spark-500);
  --accent-fg: var(--iron-900);
  --link:      var(--spark-700);
  --link-hover:var(--iron-900);

  --hot:       var(--ember-500);

  --success:   #2F8F4F;
  --warning:   #D89516;
  --danger:    var(--ember-600);

  /* ============== TYPE ============== */

  /* Families */
  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;       /* logo-style chiseled serif caps */
  --font-heading: 'Oswald', 'Barlow Condensed', 'Impact', sans-serif;     /* industrial condensed */
  --font-body:    'Barlow', 'Helvetica Neue', system-ui, sans-serif;      /* workhorse */
  --font-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Type scale — major third (1.250) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --ls-display: 0.04em;   /* Cinzel caps want air */
  --ls-tight:   -0.01em;
  --ls-eyebrow: 0.18em;

  /* ============== SPACING / RADIUS / SHADOW ============== */
  --s-2:  2px;
  --s-4:  4px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;

  --r-0:   0px;     /* default — square, like cut steel plate */
  --r-2:   2px;     /* tiny chamfer */
  --r-4:   4px;     /* buttons */
  --r-8:   8px;     /* cards */
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgba(11, 16, 24, 0.06), 0 1px 2px rgba(11, 16, 24, 0.04);
  --shadow-2: 0 2px 4px rgba(11, 16, 24, 0.08), 0 6px 12px rgba(11, 16, 24, 0.06);
  --shadow-3: 0 8px 16px rgba(11, 16, 24, 0.10), 0 16px 32px rgba(11, 16, 24, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.20);
  --glow-spark: 0 0 0 1px var(--spark-500), 0 0 24px rgba(130, 176, 214, 0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 380ms;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   Use directly on tags or via classes (.h1, .eyebrow, etc.)
   ===================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — reserve for hero moments, mark-style typography */
.display,
h1.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-48), 6vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
}

/* Industrial headings — Oswald, condensed, all-caps by default */
h1, .h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(var(--fs-36), 4.5vw, var(--fs-64));
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h3, .h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: 65ch;
}
.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

/* Eyebrow — small uppercase label, our most-used micro-typography */
.eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--spark-700);
}

.meta, small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--fg-3);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--link-hover); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-32) 0;
}

::selection { background: var(--spark-500); color: var(--iron-900); }