/*
 * Harness — the ONE theme file.
 * ----------------------------------------------------------------------------
 * This is the single source of truth for colour, type, spacing and shadow across
 * every surface: the marketing site (getharness.ca), the welcome demo, the owner
 * app, and the operator console. Change a value here and it changes everywhere.
 *
 *   - The static site links it:           <link rel="stylesheet" href="/theme.css">
 *   - The Node server inlines it at boot:  src/view/html.ts reads this file and
 *                                          drops it ahead of its component CSS.
 *
 * The palette is the warm "kraft" brand. The block below is split in two:
 *   1. BRAND TOKENS   — the real values. Edit these to restyle Harness.
 *   2. SEMANTIC ALIASES — names the app/console code already uses, pointed at the
 *                         brand tokens so older modules need no rename. Don't put
 *                         raw hexes here; alias to a brand token.
 */

:root {
    /* ====================================================================== */
    /* 1. BRAND TOKENS — the only hexes. Edit these.                          */
    /* ====================================================================== */

    /* Surfaces (warm paper) */
    --paper: #f1ece0;
    --paper-alt: #e8e0cf;
    --card: #f5eedd;

    /* Ink */
    --ink: #23352a;
    --muted: #4a5a4e;
    --faint: #6a6354;

    /* Brand green */
    --green: #1f4d32;
    --green-deep: #23352a;
    --green-line: #335041;
    --green-bg: #e6efe7;

    /* Accent gold */
    --gold: #d8a52a;

    /* Brand red — the solid "Canadian" maple block (dark, used as a fill) */
    --red: #8a2b22;
    --red-bg: #a82d20;
    --red-deep: #7c1f15;
    --red-line: #9c3a2e;

    /* Error/"bad" status — light tints for badges & buttons (app + console) */
    --bad-bg: #f3e3df;
    --bad-line: #d9bdb6;

    --amber: #9a6b00;
    --amber-bg: #fbf3da;
    --amber-line: #e7d39a;
    --blue: #2f5d8a;

    /* Hairlines */
    --line: #c9bfa8;
    --line-2: #ded5bf;

    /* Type */
    --serif: "Newsreader", Georgia, serif;
    --slab: "Zilla Slab", "Newsreader", serif;
    --app:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif;

    /* Radius / shadow */
    --radius: 14px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px rgba(31, 55, 40, 0.08), 0 1px 3px rgba(31, 55, 40, 0.05);
    --shadow-lg: 0 12px 28px -12px rgba(31, 55, 40, 0.45);

    /* ====================================================================== */
    /* 2. SEMANTIC ALIASES — what app-styles.ts / html.ts already reference.   */
    /*    Point at brand tokens above; never a raw hex.                        */
    /* ====================================================================== */

    /* Console surfaces (html.ts) */
    --bg: var(--paper);
    --panel: var(--card);
    --panel-2: var(--paper-alt);

    /* Console accent + status (html.ts) — brand green replaces the old blue */
    --accent: var(--green);
    --accent-bg: var(--green-bg);
    --accent-line: var(--green-line);
    --good: var(--green);
    --good-bg: var(--green-bg);
    --good-line: var(--green-line);
    --warn: var(--amber);
    --warn-bg: var(--amber-bg);
    --warn-line: var(--amber-line);
    --bad: var(--red);

    /* Owner app (app-styles.ts) */
    --green-d: var(--green-deep);
    --line2: var(--line-2);
}