/*
 * brand.css: the single source for Deliberate Studio's brand tokens.
 *
 * Loaded once, as the FIRST stylesheet in <head>, on every app page
 * (injectHtml) and every marketing page (marketingHtml) in _worker.js, except
 * pages marked <html data-brand-css="off"> (they read none of the shared
 * tokens yet; see docs/brand-token-migration.md).
 *
 * Served immutable (max-age=1y) at /brand.css?v=<first 10 hex of sha256 of
 * this file>. Editing this file means updating BRAND_CSS_VERSION in
 * _worker.js; scripts/brand-tokens-smoke.mjs recomputes the hash and fails
 * until you do.
 *
 * Two layers:
 *
 * 1. :root (below): the pre-rebrand tokens, unchanged since PR 1. Marketing
 *    pages still read these (the Walden marketing pages use /walden.css's
 *    --w-* set instead). Loaded first, so a page's own :root block wins.
 *
 * 2. The Walden app shell (PR 5): html:root[data-theme]. injectHtml's
 *    theme script sets data-theme on EVERY app page before first paint, and
 *    no marketing page ever has it (the smoke checks), so this layer reaches
 *    the signed-in app only. Specificity (0,2,1) beats every page's own
 *    `:root{}` (0,1,0) and `:root[data-theme="dark"]{}` (0,2,0) block and
 *    injectHtml's dark block, wherever they sit in the cascade: the app takes
 *    its neutrals, type and chrome from here without editing ~130 pages.
 *    Walden supplies the NEUTRALS (paper/linen light, peat dark), the accent,
 *    and the type. Status colours (warn/danger/good...) stay the
 *    page's own in light mode; dark mode sets text-safe Walden versions.
 *
 * One accent for every tenant (Matt, 10/10: "we put them all on deliberate
 * green, just the logo that changes"). The app chrome never reads a tenant's
 * display.accent: walden green #1a6b3c on paper, pond-lo #3f7a4e on peat, for
 * everyone. Only the logo/wordmark in the nav is the tenant's. A tenant's own
 * brand lives in its OUTPUTS (ads, decks, emails, PDP previews, the public
 * creator/deal/portal pages), which read the brand config themselves.
 *
 * --accent is mostly a FILL: ~80 pages hard-code `color:#fff` on an accent
 * background (primary buttons, active toggles), so the dark default stays dark
 * enough for white text (5.1). As TEXT on peat it is only 3.4 (UI/large-text
 * grade); --accent-text is the readable text twin (pond-hi #6fae7d in dark).
 * New text uses should read it.
 *
 * Contrast (WCAG 2.x, body-size text):
 *   light: text 18.1, soft 10.6, muted 6.2, accent 6.3 on #fafaf8 (white cards higher);
 *          on-accent #fff on #1a6b3c 6.5.
 *   dark:  text 13.6, soft 8.0, muted 5.5 on peat (5.0 on panel #25221b);
 *          accent-text #6fae7d 6.6; #fff on accent #3f7a4e 5.1,
 *          on-accent paper on #3f7a4e 4.5; accent as text 3.4 (UI only);
 *          warn 6.7, danger 6.6, blue 6.3, stub 5.5 on peat.
 *   Lichen #8a8572 (4.29 on panel) and pond #4f8a5c (4.2 on peat) are for
 *   rules and marks only, never small text.
 */

@font-face { font-family: 'Newsreader'; src: url(/fonts/newsreader.woff2?v=a861dcc978) format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url(/fonts/newsreader-italic.woff2?v=fd2a538561) format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url(/fonts/source-sans-3-400.woff2?v=6edbd48bf7) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url(/fonts/source-sans-3-600.woff2?v=580c656198) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* 1. Pre-rebrand tokens (marketing pages that have not moved to /walden.css). */
:root {
  --bg: #fafaf8;
  --surface: #ffffff;
  --text: #1a1a17;
  --muted: #6b6b63;
  --soft: #4a4a43;
  --border: #e5e5e0;
  --accent: #1a6b3c;
  --accent-soft: #e8f5ee;
  --warn: #e3a64e;
  --warn-soft: #fbf1e8;
  --danger: #b3261e;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 2. Walden app shell, light (paper). */
html:root[data-theme] {
  /* White light mode (Isa's legibility review + Matt, 10/10): near-white page,
     white cards, near-black ink. Peat stays the dark mode; the marketing site
     stays peat. Brand lives in the type, the green full stop and the wordmark. */
  --bg: #fafaf8;
  --surface: #ffffff;
  --card: #ffffff;
  --sunk: #f2f1ec;
  --bg-soft: #f2f1ec;
  --stub-bg: #f2f1ec;
  --stub: #5f5e57;
  --text: #111111;
  --ink: #111111;
  --soft: #3d3c38;
  --muted: #5f5e57;
  --border: #d4d1c6;
  --border-soft: #e9e7e0;
  --line: #d4d1c6;
  --control-edge: #848176;   /* 3.45:1 on sunk, 3.7 on bg, 3.9 on white */
  --accent: #1a6b3c;
  --accent-text: #1a6b3c;
  --accent-soft: #e6f0e8;
  --on-accent: #ffffff;
  --need: #2f5d8a;
  --on-need: #ffffff;
  --font-ui: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
}

/* Walden app shell, dark (peat). Covers every token injectHtml's dark
   block sets, so none of the old near-black values shows through. */
html:root[data-theme="dark"] {
  --bg: #1d1b15;
  --surface: #25221b;
  --card: #25221b;
  --sunk: #2c2921;
  --bg-soft: #25221b;
  --stub-bg: #25221b;
  --text: #ece4d2;
  --ink: #ece4d2;
  --soft: #b9b09c;
  --muted: #9c9784;
  --border: #3a362b;
  --border-soft: #2c2921;
  --line: #3a362b;
  --control-edge: #7a7462;   /* 3.7:1 on peat */
  --stub: #96917d;
  --accent: #3f7a4e;
  --accent-text: #6fae7d;
  --accent-soft: #24301f;
  --on-accent: #f6f1e4;
  --good: #6fae7d;
  --warn: #c99a4a;
  --warn-soft: #33291a;
  --live: #c99a4a;
  --danger: #e08a72;
  --bad: #e08a72;
  --bad-soft: #33201a;
  --blue: #7f9fc0;
  --blue-soft: #1f2a36;
  --need: #7f9fc0;
  --on-need: #1d1b15;
  color-scheme: dark;
}

/* Type: Source Sans 3 for UI, body and every heading below the page title;
   Newsreader for the page title (h1) only ("serif main only", Matt 10/10).
   Controls and the h1 face are zero-specificity DEFAULTS (:where), so any page
   rule that names a font (monospace inputs, waldo's display face) still wins. */
html:root[data-theme] body { font-family: var(--font-body); }
:where(html[data-theme]) :where(button, input, select, textarea) { font-family: inherit; }
:where(html[data-theme]) :where(h1) { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; font-optical-sizing: auto; }
html:root[data-theme] :is(table, td, th) { font-variant-numeric: tabular-nums; }
html:root[data-theme] .wordmark-dot { color: var(--accent-text); }

/* "About {agent}" — the agent's description, closed by default ("In control":
   only what you need up front, the rest on request). One quiet line under the
   page title; opens in place. Native <details>, so it works without JS. */
.ds-about { margin: 4px 0 0; }
.ds-about > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; font-size: 13px; color: var(--muted); user-select: none; }
.ds-about > summary::-webkit-details-marker { display: none; }
.ds-about > summary::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.ds-about[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.ds-about > summary:hover { color: var(--text); }
.ds-about > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.ds-about > :not(summary) { margin-top: 8px; }

/* "How it's counted" — a method note or caveat folded behind a quiet line on the
   thing it explains ("In control", 10/10). Native <details>; an empty note
   (filled later by the page, or not at all) hides its toggle. */
.ds-why { margin: 4px 0 0; }
.ds-why > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 12px; color: var(--muted); user-select: none; }
.ds-why > summary::-webkit-details-marker { display: none; }
.ds-why > summary::before { content: "?"; display: inline-grid; place-items: center; width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 700; line-height: 1; }
.ds-why > summary:hover { color: var(--text); }
.ds-why > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.ds-why:has(> :not(summary):empty) { display: none; }
.ds-why[open] > :not(summary) { margin-top: 6px; }

/* 8. Chart palette (dataviz method; validated both themes, 10/10). Identity
   colours for chart series only — status keeps its own tokens (green done,
   amber needs you, red trouble). Order is fixed: assign slots 1..N, never
   cycle; scatter/small multiples cap at 3. Light ochre (slot 4) is 2.4:1 on
   white — every ds-chart has labels or a table view, which is its relief.
   Grid/axis are recessive furniture; --viz-other is the de-emphasis grey. */
html {
  --viz-1: #2f6fb3; --viz-2: #c9672e; --viz-3: #1f9a84; --viz-4: #d19a12;
  --viz-5: #c2588e; --viz-6: #4f8f3a; --viz-7: #6b5cc4; --viz-8: #d14b45;
  --viz-other: #a9a69c; --viz-grid: #e9e7e0; --viz-axis: #d4d1c6;
  --viz-ink: var(--text, #111111); --viz-label: var(--muted, #5f5e57); --viz-surface: var(--surface, #ffffff);
}
html[data-theme="dark"] {
  --viz-1: #4a86c8; --viz-2: #d0743a; --viz-3: #2fa57c; --viz-4: #b58a20;
  --viz-5: #c9659a; --viz-6: #5e9a48; --viz-7: #8579d6; --viz-8: #d8605a;
  --viz-other: #6a665a; --viz-grid: #2f2b23; --viz-axis: #3a362b;
}