/* ==========================================================================
   Northline Concrete Forming Ltd. - type-system.css  (CONCEPT EXERCISE, fictional company)
   Fonts   : Archivo (headings, UI) + Source Serif 4 (body). Both free on Google Fonts.
   Scale   : 360px viewport = base 16px x 1.2 ; 1440px viewport = base 18px x 1.25
             Sizes interpolate linearly between the two with clamp().
   Add to <head> BEFORE this file:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* Families */
  --font-heading: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Size tokens (fluid) */
  --text-display: clamp(2.4883rem, 2.1734rem + 1.3999vw, 3.4332rem); /* 39.8px @360 > 54.9px @1440 */
  --text-h1: clamp(2.0736rem, 1.8493rem + 0.9970vw, 2.7466rem); /* 33.2px @360 > 43.9px @1440 */
  --text-h2: clamp(1.7280rem, 1.5716rem + 0.6952vw, 2.1973rem); /* 27.6px @360 > 35.2px @1440 */
  --text-h3: clamp(1.4400rem, 1.3341rem + 0.4708vw, 1.7578rem); /* 23.0px @360 > 28.1px @1440 */
  --text-h4: clamp(1.2000rem, 1.1312rem + 0.3056vw, 1.4062rem); /* 19.2px @360 > 22.5px @1440 */
  --text-body: clamp(1.0000rem, 0.9583rem + 0.1852vw, 1.1250rem); /* 16.0px @360 > 18.0px @1440 */
  --text-small: clamp(0.8750rem, 0.8667rem + 0.0370vw, 0.9000rem); /* 14.0px @360 > 14.4px @1440 */
  --text-caption: clamp(0.8125rem, 0.8000rem + 0.0556vw, 0.8500rem); /* 13.0px @360 > 13.6px @1440 */
  --text-button: clamp(1.0000rem, 0.9792rem + 0.0926vw, 1.0625rem); /* 16.0px @360 > 17.0px @1440 */
  --text-nav: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1.0000rem); /* 15.0px @360 > 16.0px @1440 */

  /* Line-height tokens */
  --lh-display: 1.1;
  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.25;
  --lh-h4: 1.25;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-caption: 1.4;
  --lh-button: 1.2;
  --lh-nav: 1.2;

  /* Letter-spacing tokens */
  --ls-display: -0.02em;
  --ls-h1: -0.015em;
  --ls-h2: -0.01em;
  --ls-h3: -0.005em;
  --ls-h4: 0em;
  --ls-body: 0em;
  --ls-small: 0em;
  --ls-caption: 0.08em;
  --ls-button: 0.02em;
  --ls-nav: 0.01em;

  /* Weight tokens */
  --fw-display: 700;
  --fw-h1: 700;
  --fw-h2: 600;
  --fw-h3: 600;
  --fw-h4: 600;
  --fw-body: 400;
  --fw-small: 400;
  --fw-caption: 600;
  --fw-button: 600;
  --fw-nav: 500;

  /* Measure (line length). 60ch = about 65-72 characters in Source Serif 4 */
  --measure: 60ch;
  --measure-narrow: 48ch;

  /* Colour tokens (brand colours unchanged; text values contrast-tested) */
  --color-text: #1F2428;          /* on --color-bg 14.08:1, on --color-bg-alt 12.05:1 */
  --color-text-muted: #4B545B;    /* on --color-bg 6.95:1, on --color-bg-alt 5.94:1 */
  --color-bg: #F3F3F0;
  --color-bg-alt: #E2E2DD;
  --color-bg-dark: #1F2428;
  --color-text-on-dark: #F3F3F0;  /* on --color-bg-dark 14.08:1 */
  --color-muted-on-dark: #C4C9CD; /* on --color-bg-dark 9.38:1 */
  --color-accent: #E8711A;        /* button fill, never body text */
  --color-on-accent: #1F2428;     /* on --color-accent 5.08:1 */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0 0 0.5em;
  text-wrap: balance;
  text-align: left;
}
h1 { font-size: var(--text-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--text-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); letter-spacing: var(--ls-h4); }
p, ul, ol { margin: 0 0 1em; }
p, li { max-width: var(--measure); text-align: left; }
small { font-size: var(--text-small); line-height: var(--lh-small); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* ---------- Utility classes ---------- */
.t-display { font-family: var(--font-heading); font-size: var(--text-display); line-height: var(--lh-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); }
.t-h1 { font-family: var(--font-heading); font-size: var(--text-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
.t-h2 { font-family: var(--font-heading); font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); }
.t-h3 { font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); letter-spacing: var(--ls-h3); }
.t-h4 { font-family: var(--font-heading); font-size: var(--text-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); letter-spacing: var(--ls-h4); }
.t-body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--fw-body); }
.t-small { font-family: var(--font-body); font-size: var(--text-small); line-height: var(--lh-small); font-weight: var(--fw-small); }
.t-caption { font-family: var(--font-heading); font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); letter-spacing: var(--ls-caption); text-transform: uppercase; }
.t-nav { font-family: var(--font-heading); font-size: var(--text-nav); line-height: var(--lh-nav); font-weight: var(--fw-nav); letter-spacing: var(--ls-nav); }
.t-lede { font-size: var(--text-h4); line-height: 1.5; }          /* intro paragraph: h4 size, serif */
.text-muted { color: var(--color-text-muted); }
.text-on-dark { color: var(--color-text-on-dark); }
.text-muted-on-dark { color: var(--color-muted-on-dark); }
.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }
.u-balance { text-wrap: balance; }

.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-button);
  letter-spacing: var(--ls-button);
  color: var(--color-on-accent);
  background: var(--color-accent);
  padding: 0.85em 1.5em;           /* tap target >= 44px high */
  border-radius: 2px;
  text-decoration: none;
}
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }