/* INVIA content pages — the shared stylesheet for every static page under public/.
 *
 * Why this exists: /terms, /privacy and /support each carried their own copy of an identical
 * core style block, and Stage 3 adds more pages. Four copies is a drift problem; eight is a
 * guarantee of drift.
 *
 * Stable, non-hashed URL on purpose: https://inviagps.com/content.css. It is referenced by
 * hand-written HTML in public/ and by the separately-deployed content Worker, neither of which
 * goes through Vite's asset hashing. public/_headers already carries an *.html rule; this file
 * is served with the default asset policy, so a token change appears on the next deploy.
 *
 * BRAND RULES THAT SHAPED THIS (CLAUDE.md, "INVIA Brand Guidelines"):
 *   - Arial Black is for the wordmark and H1 hero headlines ONLY. Everything else is Inter.
 *   - INVIA is a black and white brand. Functional colour (dirt, route blue, confirm, alert)
 *     is product-UI and map only, and never decorative.
 *   - No gradients, no decorative colour, no shadows on the wordmark.
 *
 * ONE EXCEPTION, added 2026-09-07 on Quinn's call while reviewing the manual: --content-accent.
 * This file previously carried no accent token at all, on the reading that content pages are
 * strictly monochrome. Quinn's direction is that rust is part of the design package and its
 * absence read as a mistake, so the token exists rather than each content surface inventing
 * its own. It is the same #E06C4F the product UI already calls --rust in src/styles/app.css.
 * It is an ACCENT, which is a narrow word here: hairlines, section ticks, focus rings, tints
 * at or under 0.16 alpha, the text and border of an active item, unit suffixes. Never a fill,
 * never a button, never a heading. Primary actions stay white on black.
 *
 * TOKEN VOCABULARY — anything inheriting this sheet should map onto these names rather than
 * define its own, so the whole site reads as one surface.
 */

:root {
  /* Ground and ink */
  --content-bg:      #0a0a0a;                 /* page background */
  --content-fg:      #ffffff;                 /* headings, links, emphasis */
  --content-body:    rgba(255, 255, 255, 0.82); /* body copy and list items */
  --content-muted:   rgba(255, 255, 255, 0.5);  /* meta lines, dates, captions */
  --content-line:    rgba(255, 255, 255, 0.16); /* hairlines, card borders */
  /* A hairline that has to read against a raised panel rather than the page ground. Added
     because the content Worker needed it and was about to define its own; a second vocabulary
     for the same job is how two surfaces stop matching. */
  --content-line-strong: rgba(255, 255, 255, 0.28);

  /* Raised surfaces. Two steps only, deliberately: more invites decoration, and INVIA is a
     black and white brand. Both are white at low alpha over the ground, never a grey literal,
     so they stay correct if --content-bg ever moves. */
  --content-panel:        rgba(255, 255, 255, 0.035);
  --content-panel-raised: rgba(255, 255, 255, 0.065);

  /* Accent. See the exception noted in the header comment before reaching for this.
     THE ALPHAS ARE NOT ARBITRARY. templates/manual.css in the content Worker reads each of
     these with its own literal as the var() fallback, so whatever is written here becomes
     the live manual's value the moment this file deploys. These are the manual's current
     literals, which makes publishing this a no-op rather than a silent restyle.
     --content-accent-line also matches app.css --rust-border. --content-accent-tint does
     NOT match app.css --rust-tint, which is 0.12: the product UI tints a little heavier
     than the content pages do, and changing either to chase the other would move a shipped
     surface for no reason. Both are inside the 0.16 ceiling the accent rule allows. */
  --content-accent:      #E06C4F;                  /* app.css --rust */
  --content-accent-tint: rgba(224, 108, 79, 0.10); /* backgrounds only, at this alpha */
  --content-accent-line: rgba(224, 108, 79, 0.45); /* app.css --rust-border */

  /* Type */
  --content-font-display: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --content-font-body:    Inter, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --content-measure: 720px;                   /* max line length, ~90 characters at 15px */
  --content-pad:     48px 24px;
}

body {
  background: var(--content-bg);
  color: var(--content-fg);
  font-family: var(--content-font-body);
  margin: 0;
  padding: var(--content-pad);
  line-height: 1.65;
}

main { max-width: var(--content-measure); margin: 0 auto; }

/* The wordmark, and only the wordmark, gets the display face. */
.wordmark {
  font-family: var(--content-font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 22px;
}

h1 { font-size: 32px; font-weight: 700; margin: 24px 0 4px; }
h2 { font-size: 20px; font-weight: 600; margin: 32px 0 8px; }
h3 { font-size: 16px; font-weight: 600; margin: 24px 0 6px; }

p, li { font-size: 15px; color: var(--content-body); }
a { color: var(--content-fg); }

.meta      { font-size: 13px; color: var(--content-muted); }
.operative { color: var(--content-fg); font-weight: 600; }   /* terms: the binding sentence */

/* A bordered block for an address, a callout, or anything that needs its own ground. */
.contact { border: 1px solid var(--content-line-strong); background: var(--content-panel); border-radius: 10px; padding: 20px 22px; margin: 24px 0; }
.contact .addr { font-size: 19px; font-weight: 600; }

.steps { padding-left: 20px; }
.steps li { margin: 6px 0; }

/* Wide content must scroll inside itself, never push the page sideways. */
table, pre { display: block; max-width: 100%; overflow-x: auto; }
img { max-width: 100%; height: auto; }

/* Phones. Matches the app's own breakpoint so the whole site agrees on what "phone" means. */
@media (max-width: 768px) {
  :root { --content-pad: 28px 18px; }
  h1 { font-size: 27px; }
  h2 { font-size: 18px; }
}