/* xChk design tokens (3 Oct 2026) — one home for the palette. House style is maclawran.ca: paper, one green,
 * Charter for the rare serif heading, the system font for everything else. The four verdict hues keep their meaning
 * everywhere. Consumed by our own rules (--x-*) and mapped onto the design system's variables below. */
:root {
  /* WARM PAPER (3 Oct 2026). The atmosphere Sean pointed at — warm off-white, near-black ink, hairlines — with our
   * own green and our own faces. Not a brand's palette: a temperature. */
  /* 4 Oct 2026, Sean, testing: the hard blacks — ink, the logo box, the mode square — read as grey in light */
  --x-ink: #4f4f4a; --x-ink-soft: #5c5c57; --x-muted: #6f6e68; --x-line: #e6e4dd;
  --x-paper: #ffffff; --x-surface: #faf9f5; --x-surface-2: #f1efe8;
  --x-accent: #39594d; --x-accent-soft: #e7ecea; --x-logo-box: #5a5a55;   /* the serious green: nav, links, emphasis — the verdict green stays brighter so 'accounted' still reads as go */
  --x-green: #1c7a52; --x-amber: #b7791f; --x-magenta: #a63fc0; --x-red: #c2362f; --x-grey: #8a948d; --x-blue: #2f6fb7;
  --x-green-bg: #e2efe8; --x-amber-bg: #fbf3e3; --x-magenta-bg: #f6e8f8; --x-red-bg: #fbeceb;
  --x-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --x-serif: Charter, Georgia, "Times New Roman", serif;
  --x-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
}
/* HEADERS, ONE FACE SITEWIDE (Sean, 4 Oct 2026: "use the Reviews & Approvals font sitewide for headers"): the system
 * sans at 600 with tight tracking, three sizes. Loaded before every page's own sheet, so a page keeps a size it sets
 * on purpose; the face and the weight it inherits from here. */
h1, h2, h3 { font-family: var(--x-sans); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; }
:root {
}

/* GitHub Primer CSS 21 (css/vendor/primer), themed. Primer defines its light theme on these attribute selectors;
 * the same selector here, loaded after it, wins. Everything not listed keeps Primer's light default. */
/* 4 Oct 2026: auto on a light OS had no house block at all — Primer's own light, a transparent header. The dark
 * @media block below is the same specificity and later, so auto + dark OS still wins. */
[data-color-mode=light][data-light-theme=light], [data-color-mode=auto][data-light-theme=light] {
  --color-canvas-default: var(--x-paper);
  --color-canvas-subtle: var(--x-surface);
  --color-canvas-inset: var(--x-surface);
  --color-border-default: var(--x-line);
  --color-border-muted: #efede6;
  --color-fg-default: var(--x-ink);
  --color-fg-muted: var(--x-muted);
  --color-fg-subtle: #8f8e87;
  --color-accent-fg: var(--x-accent);
  --color-accent-emphasis: var(--x-accent);
  --color-accent-subtle: var(--x-accent-soft);
  --color-accent-muted: #c5d0cb;
  --color-success-fg: var(--x-green);  --color-success-emphasis: var(--x-green);  --color-success-subtle: var(--x-green-bg);  --color-success-muted: #bcd8c9;
  --color-attention-fg: var(--x-amber); --color-attention-emphasis: var(--x-amber); --color-attention-subtle: var(--x-amber-bg); --color-attention-muted: #ecd9b0;
  --color-danger-fg: var(--x-red);     --color-danger-emphasis: var(--x-red);     --color-danger-subtle: var(--x-red-bg);     --color-danger-muted: #e8b9b6;
  --color-done-fg: var(--x-magenta);   --color-done-emphasis: var(--x-magenta);   --color-done-subtle: var(--x-magenta-bg);   --color-done-muted: #e0bfe6;
  --color-open-emphasis: var(--x-green); --color-closed-emphasis: var(--x-red);
  --color-header-bg: var(--x-paper); --color-header-text: var(--x-ink-soft); --color-header-logo: var(--x-ink);
  --color-btn-primary-bg: var(--x-accent); --color-btn-primary-hover-bg: #2f4b40; --color-btn-primary-border: rgba(0,0,0,.12);
  --color-sidenav-selected-bg: var(--x-paper);
  /* Primer 21.5 reads the NEW token family in most rules; the legacy --color-* above is kept for the rest */
  --bgColor-default: var(--x-paper); --bgColor-muted: var(--x-surface); --bgColor-inset: var(--x-surface);
  --borderColor-default: var(--x-line); --borderColor-muted: #efede6;
  --fgColor-default: var(--x-ink); --fgColor-muted: var(--x-muted); --fgColor-onEmphasis: #fff;
  --fgColor-accent: var(--x-accent); --bgColor-accent-emphasis: var(--x-accent); --bgColor-accent-muted: var(--x-accent-soft); --borderColor-accent-emphasis: var(--x-accent); --borderColor-accent-muted: #c5d0cb;
  --fgColor-success: var(--x-green); --bgColor-success-emphasis: var(--x-green); --bgColor-success-muted: var(--x-green-bg); --borderColor-success-muted: #bcd8c9; --borderColor-success-emphasis: var(--x-green); --borderColor-open-emphasis: var(--x-green);
  --fgColor-attention: var(--x-amber); --bgColor-attention-emphasis: var(--x-amber); --bgColor-attention-muted: var(--x-amber-bg); --borderColor-attention-muted: #ecd9b0; --borderColor-attention-emphasis: var(--x-amber);
  --fgColor-danger: var(--x-red); --bgColor-danger-emphasis: var(--x-red); --bgColor-danger-muted: var(--x-red-bg); --borderColor-danger-muted: #e8b9b6; --borderColor-danger-emphasis: var(--x-red); --borderColor-closed-emphasis: var(--x-red);
  --fgColor-done: var(--x-magenta); --bgColor-done-emphasis: var(--x-magenta); --bgColor-done-muted: var(--x-magenta-bg); --borderColor-done-emphasis: var(--x-magenta);
  --focus-outlineColor: var(--x-accent); --header-fgColor-default: var(--x-ink-soft); --header-bgColor: var(--x-paper);
  --button-primary-bgColor-rest: var(--x-accent); --button-primary-bgColor-hover: #2f4b40;
}

/* DARK (3 Oct 2026). Our palette for a dark canvas — the verdict hues lifted so they read on near-black, the green
 * kept as the one accent. Primer carries its own dark theme on the same selectors; this recolours it the same way
 * the light block does. --x-* switch too, so our own rules follow the mode. */
[data-color-mode=dark][data-dark-theme=dark], [data-color-mode=auto][data-light-theme=dark] {
  --x-ink: #e6e9f0; --x-ink-soft: #c9d1d9; --x-muted: #8b949e; --x-line: #30363d;
  --x-paper: #161b22; --x-surface: #0d1117; --x-surface-2: #21262d;
  --x-accent: #3fb77f; --x-accent-soft: #12351f;
  --x-green: #3fb77f; --x-amber: #e3b341; --x-magenta: #d78cf0; --x-red: #f47067; --x-grey: #8b949e; --x-blue: #6cb6ff;
  --x-green-bg: #12351f; --x-amber-bg: #3a2d10; --x-magenta-bg: #3a1a45; --x-red-bg: #4a1c1c;
  --color-canvas-default: var(--x-paper); --color-canvas-subtle: var(--x-surface); --color-canvas-inset: var(--x-surface);
  --color-border-default: var(--x-line); --color-border-muted: #21262d;
  --color-fg-default: var(--x-ink); --color-fg-muted: var(--x-muted); --color-fg-subtle: #6e7681;
  --color-accent-fg: var(--x-accent); --color-accent-emphasis: #2ea36a; --color-accent-subtle: var(--x-accent-soft); --color-accent-muted: #1f5a3a;
  --color-success-fg: var(--x-green);  --color-success-emphasis: #2ea36a;  --color-success-subtle: var(--x-green-bg);  --color-success-muted: #1f5a3a;
  --color-attention-fg: var(--x-amber); --color-attention-emphasis: #b08020; --color-attention-subtle: var(--x-amber-bg); --color-attention-muted: #5a4414;
  --color-danger-fg: var(--x-red);     --color-danger-emphasis: #c93c37;     --color-danger-subtle: var(--x-red-bg);     --color-danger-muted: #6b2a2a;
  --color-done-fg: var(--x-magenta);   --color-done-emphasis: #a35fc0;   --color-done-subtle: var(--x-magenta-bg);   --color-done-muted: #5a2a6b;
  --color-open-emphasis: #2ea36a; --color-closed-emphasis: #c93c37;
  --color-header-bg: var(--x-paper); --color-header-text: var(--x-ink-soft); --color-header-logo: var(--x-ink);
  --color-btn-primary-bg: #2ea36a; --color-btn-primary-hover-bg: #3fb77f;
  --color-sidenav-selected-bg: var(--x-paper);
  --bgColor-default: var(--x-paper); --bgColor-muted: var(--x-surface); --bgColor-inset: var(--x-surface);
  --borderColor-default: var(--x-line); --borderColor-muted: #21262d;
  --fgColor-default: var(--x-ink); --fgColor-muted: var(--x-muted); --fgColor-onEmphasis: #fff;
  --fgColor-accent: var(--x-accent); --bgColor-accent-emphasis: #2ea36a; --bgColor-accent-muted: var(--x-accent-soft); --borderColor-accent-emphasis: #2ea36a; --borderColor-accent-muted: #1f5a3a;
  --fgColor-success: var(--x-green); --bgColor-success-emphasis: #2ea36a; --bgColor-success-muted: var(--x-green-bg); --borderColor-success-muted: #1f5a3a; --borderColor-success-emphasis: #2ea36a; --borderColor-open-emphasis: #2ea36a;
  --fgColor-attention: var(--x-amber); --bgColor-attention-emphasis: #b08020; --bgColor-attention-muted: var(--x-amber-bg); --borderColor-attention-muted: #5a4414; --borderColor-attention-emphasis: #b08020;
  --fgColor-danger: var(--x-red); --bgColor-danger-emphasis: #c93c37; --bgColor-danger-muted: var(--x-red-bg); --borderColor-danger-muted: #6b2a2a; --borderColor-danger-emphasis: #c93c37; --borderColor-closed-emphasis: #c93c37;
  --fgColor-done: var(--x-magenta); --bgColor-done-emphasis: #a35fc0; --bgColor-done-muted: var(--x-magenta-bg); --borderColor-done-emphasis: #a35fc0;
  --focus-outlineColor: var(--x-accent); --header-fgColor-default: var(--x-ink-soft); --header-bgColor: var(--x-paper);
  --button-primary-bgColor-rest: #2ea36a; --button-primary-bgColor-hover: #3fb77f;
}
@media (prefers-color-scheme: dark) {
  [data-color-mode=auto][data-dark-theme=dark] {
    --x-ink: #e6e9f0; --x-ink-soft: #c9d1d9; --x-muted: #8b949e; --x-line: #30363d;
    --x-paper: #161b22; --x-surface: #0d1117; --x-surface-2: #21262d;
    --x-accent: #3fb77f; --x-accent-soft: #12351f;
    --x-green: #3fb77f; --x-amber: #e3b341; --x-magenta: #d78cf0; --x-red: #f47067; --x-grey: #8b949e; --x-blue: #6cb6ff;
    --x-green-bg: #12351f; --x-amber-bg: #3a2d10; --x-magenta-bg: #3a1a45; --x-red-bg: #4a1c1c;
    --color-canvas-default: var(--x-paper); --color-canvas-subtle: var(--x-surface); --color-canvas-inset: var(--x-surface);
    --color-border-default: var(--x-line); --color-border-muted: #21262d;
    --color-fg-default: var(--x-ink); --color-fg-muted: var(--x-muted); --color-fg-subtle: #6e7681;
    --color-accent-fg: var(--x-accent); --color-accent-emphasis: #2ea36a; --color-accent-subtle: var(--x-accent-soft); --color-accent-muted: #1f5a3a;
    --color-success-fg: var(--x-green);  --color-success-emphasis: #2ea36a;  --color-success-subtle: var(--x-green-bg);  --color-success-muted: #1f5a3a;
    --color-attention-fg: var(--x-amber); --color-attention-emphasis: #b08020; --color-attention-subtle: var(--x-amber-bg); --color-attention-muted: #5a4414;
    --color-danger-fg: var(--x-red);     --color-danger-emphasis: #c93c37;     --color-danger-subtle: var(--x-red-bg);     --color-danger-muted: #6b2a2a;
    --color-done-fg: var(--x-magenta);   --color-done-emphasis: #a35fc0;   --color-done-subtle: var(--x-magenta-bg);   --color-done-muted: #5a2a6b;
    --color-open-emphasis: #2ea36a; --color-closed-emphasis: #c93c37;
    --color-header-bg: var(--x-paper); --color-header-text: var(--x-ink-soft); --color-header-logo: var(--x-ink);
    --color-btn-primary-bg: #2ea36a; --color-btn-primary-hover-bg: #3fb77f;
    --color-sidenav-selected-bg: var(--x-paper);
    --bgColor-default: var(--x-paper); --bgColor-muted: var(--x-surface); --bgColor-inset: var(--x-surface);
    --borderColor-default: var(--x-line); --borderColor-muted: #21262d;
    --fgColor-default: var(--x-ink); --fgColor-muted: var(--x-muted); --fgColor-onEmphasis: #fff;
    --fgColor-accent: var(--x-accent); --bgColor-accent-emphasis: #2ea36a; --bgColor-accent-muted: var(--x-accent-soft); --borderColor-accent-emphasis: #2ea36a; --borderColor-accent-muted: #1f5a3a;
    --fgColor-success: var(--x-green); --bgColor-success-emphasis: #2ea36a; --bgColor-success-muted: var(--x-green-bg); --borderColor-success-muted: #1f5a3a; --borderColor-success-emphasis: #2ea36a; --borderColor-open-emphasis: #2ea36a;
    --fgColor-attention: var(--x-amber); --bgColor-attention-emphasis: #b08020; --bgColor-attention-muted: var(--x-amber-bg); --borderColor-attention-muted: #5a4414; --borderColor-attention-emphasis: #b08020;
    --fgColor-danger: var(--x-red); --bgColor-danger-emphasis: #c93c37; --bgColor-danger-muted: var(--x-red-bg); --borderColor-danger-muted: #6b2a2a; --borderColor-danger-emphasis: #c93c37; --borderColor-closed-emphasis: #c93c37;
    --fgColor-done: var(--x-magenta); --bgColor-done-emphasis: #a35fc0; --bgColor-done-muted: var(--x-magenta-bg); --borderColor-done-emphasis: #a35fc0;
    --focus-outlineColor: var(--x-accent); --header-fgColor-default: var(--x-ink-soft); --header-bgColor: var(--x-paper);
    --button-primary-bgColor-rest: #2ea36a; --button-primary-bgColor-hover: #3fb77f;
  }
}

/* THE CARD WALL'S GREYS (5 Oct 2026). In dark, a page laid out as a wall of cards (the desk, the wall, history) sits
 * on neutral greys sampled from the card wall Sean showed (page #1c1c1c, card #252527) instead of the house navy.
 * The class goes on the page's content area; the header and the rail keep the house palette. One home: this was
 * written twice (css/desk.css, css/wall.css) before history needed it. Light mode is the house palette as it is. */
[data-color-mode=dark] .card-wall, [data-color-mode=auto][data-light-theme=dark] .card-wall {
  --color-canvas-default: #1c1c1c; --color-canvas-subtle: #252527; --color-border-default: #393b3d; --color-border-muted: #303234;
  --bgColor-default: #1c1c1c; --bgColor-muted: #252527; --borderColor-default: #393b3d; --borderColor-muted: #303234; }
@media (prefers-color-scheme: dark) {
  [data-color-mode=auto][data-dark-theme=dark] .card-wall {
    --color-canvas-default: #1c1c1c; --color-canvas-subtle: #252527; --color-border-default: #393b3d; --color-border-muted: #303234;
    --bgColor-default: #1c1c1c; --bgColor-muted: #252527; --borderColor-default: #393b3d; --borderColor-muted: #303234; }
}
.card-wall { background: var(--color-canvas-default); }