/* SELF-HOSTED, NOT GOOGLE FONTS, and that is three decisions at once.
 *
 * It keeps a third-party request off every page, so the privacy page has one fewer
 * provider to name — the same reasoning the main site uses. It is faster, because there
 * is no second DNS lookup and TLS handshake before any text can be styled. And it is the
 * only version that works under this site's CSP, which sets `font-src 'self'` and names
 * no external host.
 *
 * woff2 only. Every browser that runs this tool supports it, and shipping woff as well
 * would double the directory to serve a browser nobody has.
 *
 * `font-display: swap` — text is readable in the fallback immediately and reflows when
 * the face arrives. The alternative is a blank page while a font downloads, and §1's bar
 * is a phone, first try, under three minutes.
 *
 * THE FALLBACK STACKS ARE NOT DECORATION. Georgia is a serif with a large x-height that
 * sits close to Lora, and the system-ui stack matches Source Sans 3's proportions, so
 * the swap moves the text a little rather than re-flowing the whole page.
 */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lora-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/lora-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lora-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}
/* The one italic face on the site, and it exists for a specific job: placeholders.
 * See the note on ::placeholder in app.css. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
}

/* ArkSystems brand tokens.
 *
 * These are the LIVE WEBSITE'S values, not the build brief's §14 table. The brief
 * disagreed in three places — secondary, page ground and heading ink — and the site
 * wins, by Fredrick's decision of 9 Sep 2026. Two ArkSystems properties one shade
 * apart reads as an accident rather than a decision.
 *
 * Do not introduce a colour that is not in this file.
 */

:root {
  --ark-olive:          #38512F;  /* primary. Headings, primary button */
  --ark-olive-2:        #61702E;  /* secondary. Borders, quiet accents */
  --ark-surface:        #FAF9F4;  /* page ground. Near-white, warm */
  --ark-white:          #FFFFFF;
  --ark-ink:            #223A1A;  /* headings on light */
  --ark-body-ink:       #565248;  /* body copy */
  --ark-green-soft:     #E2ECDF;  /* section tint */
  --ark-hairline:       #E7E3D9;  /* dividers */
  --ark-muted:          #6F6A61;  /* small print. Passes AA at 14px on surface */

  /* TWO TERRACOTTA SHADES, AND THIS IS NOT A PREFERENCE.
   *
   * The issued brand hex fails WCAG AA for small text on every background this design
   * uses — measured 4.00–4.69 against a 4.5 requirement. It is therefore scoped to
   * non-text marks, where the 3:1 UI-component threshold applies and it passes
   * comfortably. Any terracotta TEXT takes the darker shade.
   *
   * Brief §15 requires AA, so setting a label in the raw hex breaks an acceptance
   * criterion rather than a guideline. */
  --ark-terracotta:     #A8623E;  /* rules, borders, icon strokes. NEVER text */
  --ark-terracotta-ink: #945637;  /* any terracotta text */

  --ark-font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --ark-font-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ark-radius:    18px;
  --ark-radius-sm: 10px;
  --ark-measure:   34rem;  /* one dominant idea per screen; keep lines readable */
}