/* VeriCite design foundation — phase D1.
 *
 * ONE source of truth for type, accent, grayscale, spacing and heading scale.
 * Every VeriCite surface links this file; page <style> blocks may only CONSUME
 * these variables, never restate their values. Two consequences worth knowing
 * before editing:
 *
 *  1. This file is public (deep-memo share pages are unauthenticated). It is
 *     listed in deploy/Caddyfile's @public matcher along with /static/fonts/*.
 *     Removing it there makes every shared memo render unstyled.
 *  2. The accent literal lives HERE and nowhere else. tests/test_design_tokens_d1.py
 *     greps the served surfaces for colour literals and fails the build if one
 *     reappears.
 *
 * THE THESIS: gravitas from typography and restraint, expressed as a
 * DOCUMENT / CHROME split. Rendered law — memos, reports, statutes, opinions,
 * verified quotations — is set in a text serif at a book measure. The
 * application around it stays a quiet grotesk at small sizes. One owned accent.
 *
 * FONTS: Source Serif 4 v4.005 (Adobe), SIL Open Font License 1.1 — see
 * ./fonts/OFL.txt. Self-hosted, never a CDN (strict CSP + no third-party
 * request leaks a reader's IP to a font host). The shipped files are the
 * official variable WOFF2s subset to Latin + Latin-Ext + punctuation with
 * pyftsubset; both variation axes survive (wght 200-900, opsz 8-60), so one
 * file covers every weight the product uses.
 */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-roman-var-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-italic-var-latin.woff2") format("woff2");
}

:root {
  /* ── Type families ──────────────────────────────────────────────────────
   * --vc-font-document : rendered law. --vc-font-chrome : the application.
   * The serif stack degrades to the platform's best book face while the
   * webfont swaps in, so a slow font never leaves prose in a default serif. */
  --vc-font-document: "Source Serif 4", ui-serif, Charter, Georgia, "Times New Roman", serif;
  --vc-font-chrome: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, Roboto, sans-serif;
  --vc-font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* Unprefixed aliases: what page rules actually write. */
  --font-document: var(--vc-font-document);
  --font-chrome: var(--vc-font-chrome);
  --font-mono: var(--vc-font-mono);

  /* ── Accent: deep oxblood, the colour of law-report bindings ────────────
   * Contrast on #fff (WCAG 2.1): accent 9.30:1, hover 12.21:1 — both clear
   * AA (4.5:1) for text and AAA (7:1), in either direction (white-on-accent
   * buttons and accent-on-white links). --vc-accent-rule / --vc-accent-subtle
   * are BACKGROUND / border tints only; never set text in them. */
  --vc-accent: #7a2e2e;
  --vc-accent-hover: #5c2323;
  --vc-accent-subtle: #f7efef;
  --vc-accent-rule: #d9c5c5;
  /* Tonal companion for the landing hero's gradient — 6.12:1 on white, so it
   * still clears AA where the gradient lands on TEXT. Not a second accent. */
  --vc-accent-light: #a04545;
  /* Channels of --vc-accent, for the rgba() tints the landing hero needs.
   * Keep in sync with --vc-accent; the D1 test asserts they agree. */
  --vc-accent-rgb: 122, 46, 46;

  --accent: var(--vc-accent);
  --accent-hover: var(--vc-accent-hover);
  --accent-subtle: var(--vc-accent-subtle);
  --accent-rule: var(--vc-accent-rule);
  --accent-light: var(--vc-accent-light);
  --accent-rgb: var(--vc-accent-rgb);

  /* ── Grayscale (the neutrals already in use, named) ─────────────────────
   * gray-500 is the LIGHTEST value permitted for text: 4.72:1 on white and
   * 4.52:1 on --vc-card, so it clears AA on both surfaces the product uses.
   * --vc-faint (2.64:1) is decorative only — hairlines, disabled marks,
   * never body or label text a reader must actually read. */
  --vc-ink: #1a1a1a;
  --vc-gray-800: #333333;
  --vc-gray-700: #555555;
  --vc-gray-600: #6b7177;
  --vc-gray-500: #6e747b;
  --vc-faint: #9aa0a6;
  --vc-hair: #ececec;
  --vc-card: #fafafa;
  --vc-surface: #ffffff;

  /* ── Spacing scale, 4px base ────────────────────────────────────────── */
  --vc-space-1: 4px;
  --vc-space-2: 8px;
  --vc-space-3: 12px;
  --vc-space-4: 16px;
  --vc-space-5: 20px;
  --vc-space-6: 24px;
  --vc-space-8: 32px;
  --vc-space-10: 40px;
  --vc-space-12: 48px;
  --vc-space-16: 64px;

  /* ── Heading scale, ~1.3 ratio ──────────────────────────────────────── */
  --vc-text-display: 28px;
  --vc-text-h1: 22px;
  --vc-text-h2: 17px;
  --vc-text-h3: 15px;
  --vc-text-body: 15px;
  --vc-text-small: 13px;
  --vc-text-micro: 11px;

  /* ── Document typography ────────────────────────────────────────────────
   * 16.5px never shrinks below 16px at any width: legal prose read on a phone
   * is the same prose. The measure is a `ch` bound that collapses to the
   * viewport minus its gutters rather than forcing a horizontal scroll. */
  --vc-doc-size: 16.5px;
  --vc-doc-leading: 1.6;
  --vc-doc-measure: 72ch;
  --vc-doc-gutter: 20px;

  /* Minimum comfortable touch target. */
  --vc-touch: 44px;
}

/* ── The document surface ───────────────────────────────────────────────
 * Applied to rendered-law containers: the memo body, the report body, the
 * statute text, the opinion text. Chrome does NOT get this class. */
.vc-document {
  font-family: var(--vc-font-document);
  font-size: var(--vc-doc-size);
  line-height: var(--vc-doc-leading);
  max-width: min(var(--vc-doc-measure), 100%);
  /* Lining figures, deliberately: legal prose is dense with volume, page and
   * year numerals ("48 Cal.3d 644 (1989)"), and old-style figures with
   * descenders read as eccentric in a citation rather than bookish. */
  font-variant-numeric: lining-nums proportional-nums;
  text-rendering: optimizeLegibility;
}

/* Headings inside a document are the document's own voice — serif, at the
 * display end of the scale. (Chrome headings stay small and grotesk.) */
.vc-document h1,
.vc-document h2,
.vc-document h3,
.vc-document h4 {
  font-family: var(--vc-font-document);
  text-wrap: balance;
}

/* Numerals inside tables must align in columns. */
.vc-document table,
.vc-document code {
  font-variant-numeric: lining-nums tabular-nums;
}

/* A verified quotation is a quotation INSIDE a document, not a coloured card:
 * a thin neutral rule, indented, same serif, no fill. */
.vc-document blockquote {
  font-family: var(--vc-font-document);
  border-left: 2px solid var(--vc-accent-rule);
  background: none;
  border-radius: 0;
  margin: var(--vc-space-4) 0;
  padding: var(--vc-space-1) 0 var(--vc-space-1) var(--vc-space-4);
  color: var(--vc-gray-700);
}

/* Every table rendered inside a document scrolls in its OWN box. A memo table
 * must never be the reason the page itself scrolls sideways on a phone. */
.vc-document .tablewrap,
.vc-document .md-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: var(--vc-space-4) 0;
}

.vc-document table {
  max-width: 100%;
}

/* Chrome type: explicit, so nothing inherits a browser default serif. */
.vc-chrome {
  font-family: var(--vc-font-chrome);
}

@media (max-width: 560px) {
  .vc-document {
    /* The ch bound is already viewport-relative; only the gutter changes. */
    max-width: 100%;
  }
}