/* ── Anders & Voss brand tokens (Issue #72) ───────────────────────────
   Redefines the shared design-system's *semantic* CSS custom properties
   at :root, scoped to this file only - the mechanism every shell in this
   codebase must use to differ visually, since `design_system/
   document_base.html` unconditionally loads shared/design-system's own
   token files first and a child template can only add more CSS after
   them, never remove a `<link>` the parent already emitted (see demo/
   base.html's own comment). Loaded first, before demo/chrome.css, so
   every subsequent rule - shared component or this product's own - reads
   these values rather than Website Studio red or the personal site's
   palette. No shared file is edited; this technique is exactly what
   products/demo/static/demo/chrome.css already did for one accent color
   (Issue #65), applied here to the whole semantic palette plus heading
   typography.

   A warm, editorial-technical palette - ink and paper, one saturated
   rust accent - deliberately far from both Website Studio's crimson and
   the personal site's blush pink, and from this demo's own previous
   (Issue #65) blue accent.
*/
:root {
    --color-primary: #C1541C;
    --color-primary-hover: #9E4315;
    --color-primary-light: #F3E1D4;
    --color-interactive: var(--color-primary);
    --color-interactive-light: var(--color-primary-light);

    --color-background: #FAF7F2;
    --color-surface: #F1ECE3;
    --color-surface-muted: #EDE4D5;
    --color-border: #E1D7C4;

    --color-heading: #1F1B16;
    --color-text: #3A342C;
    --color-text-muted: #776C5C;

    /* A flatter, more graphic language than the rounded/soft-shadow
       default - sharper corners, a thin hairline shadow instead of a
       diffuse one. Changes how every shared `.card`/`.btn-*`/`.tag`
       this product still uses renders, without touching those files. */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 10px;
    --shadow-card: 0 1px 0 rgba(31, 27, 22, .08);
    --shadow-hover: 0 4px 12px rgba(31, 27, 22, .12);
}

/* Headings inherit `body`'s font-family in the shared design system
   (layouts/page.css never sets its own) - explicitly switching them to
   the mono face here (while body/labels/buttons stay on Inter via
   --font-sans, unchanged) is this product's own typographic hierarchy:
   technical, condensed display type for headings against warm serif-
   adjacent reading body copy - the "coherent typographic system, not
   fonts chosen per component" the brand calls for. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
}