/* GENERATED by build.mjs from engagement.config.json — DO NOT EDIT.
 * Edit engagement.config.json (branding.palette / branding.fonts), then run
 * `node build.mjs`. Cloudflare Pages runs that on every deploy, so a hand-edit
 * here disappears at the next push with no error to tell you why.
 *
 * Fonts are SELF-HOSTED. Never replace these @font-face rules with a Google
 * Fonts <link>: it adds a third-party request to a client-facing page and breaks
 * rendering offline and from disk.
 *
 * Alike ships weight 400 ONLY — there is no bold face. So Alike is scoped to
 * running prose (--font-prose) and all UI text, tables, badges and chips stay
 * Montserrat (--font-sans). Applying Alike to bold UI text would leave the
 * browser to synthesise a bold serif, which looks poor at small sizes.
 *   ── surfaces ──
 *   ── ink ──
 *   ── brand: Cirrius Orange #f68c1f (Primary). Carries links, live state and CTAs ──
 *   ── chrome: Dark Grey #4b494a (Primary). Header band and dark panels ──
 *   ── tint: derived from Pale Yellow #ffd585 (Primary). Section fills ──
 *   ── expand: Sat Cyan #1e8ec6 (Accent). 'Opens more detail' affordances ONLY. It is an accent, so per the brand guide never pair it with another accent in one component ──
 *   ── RAG: DELIBERATELY off-palette. The brand guide defines no RAG set, and on a reporting surface exec legibility plus parity with ClickUp's own badge colours outrank palette purity. Documented as a deviation, not an oversight ──
 *   ── elevation ──
 *   ── categorical chart series. Nine hues for the nine workstreams, every one a colour the Cirrius guide names (Primary + Accent + Alternate Colorway). CHOSEN BY MAXIMISING MINIMUM PAIRWISE SEPARATION, not by taste: the guide's Pale Teal #95d1cc and Pale Cyan #9bcde6 sit 10.6 apart in sRGB and are indistinguishable side by side in a legend, so a naive pick of 'the nine guide colours' produced a chart where two workstreams read as one. This set scores 22.8 and drops Pale Teal, Pale Magenta, CSM Khaki and CSM Olive to achieve it. CSM Brown is from the Alternate Colorway, which the guide otherwise associates with Military Honor materials — used here purely as a hue, and flagged so the choice is visible rather than accidental. tools/test-contrast.mjs enforces both the separation floor and per-series visibility; change a value and it will tell you what it broke. The guide's 'never two accents together' rule governs logo and text pairings, not a categorical scale ──
 */

@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alike';
  src: url('./fonts/alike-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
    --bg: #ffffff;
    --bg-soft: #faf9f8;
    --white: #ffffff;
    --border: #e6e4e2;
    --border-2: #d6d3d3;
    --text: #332f30;
    --muted: #6f6d6e;
    --muted-2: #8b8889;
    --faint: #abadb0;
    --grey-mid: #8b8889;
    --brand: #f68c1f;
    --brand-dark: #d97712;
    --brand-deep: #a85a0b;
    --brand-soft: #fbc07a;
    --brand-ink: #8a4708;
    --chrome: #4b494a;
    --chrome-2: #5f5d5e;
    --tint: #fff4de;
    --tint-2: #ffe9bd;
    --tint-border: #f3d08a;
    --accent-tint: #ffd585;
    --pill-muted-bg: #eeecec;
    --pill-muted-border: #d6d3d3;
    --expand: #1e8ec6;
    --expand-ink: #155f85;
    --expand-bg: #e8f4fb;
    --expand-border: #b3ddf2;
    --ok: #1e7d5a;
    --ok-bg: #e6f4ee;
    --ok-border: #a8d8c3;
    --ok-ink: #17603f;
    --warn: #b7791f;
    --warn-bg: #fdf3e2;
    --warn-border: #f0d49a;
    --warn-ink: #8a5a12;
    --risk: #c0392b;
    --risk-bg: #fbeae8;
    --risk-border: #eebbb4;
    --risk-ink: #8f2f24;
    --idle: #8b8889;
    --idle-bg: #eeecec;
    --shadow: 0 1px 2px rgba(51,47,48,0.04), 0 4px 16px rgba(51,47,48,0.06);
    --shadow-hover: 0 2px 6px rgba(246,140,31,0.12), 0 8px 24px rgba(246,140,31,0.10);
    --shadow-drawer: 0 0 0 1px rgba(51,47,48,0.06), -8px 0 40px rgba(51,47,48,0.16);
    --series-1: #6b3e1a;
    --series-2: #9bcde6;
    --series-3: #f68c1f;
    --series-4: #abadb0;
    --series-5: #ffd585;
    --series-6: #4b494a;
    --series-7: #0f9a8f;
    --series-8: #cf327f;
    --series-9: #1e8ec6;

    /* typography */
    --font-sans: 'Montserrat', 'Futura', 'Avenir Next', 'Century Gothic', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-prose: 'Alike', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* ── semantic aliases, DERIVED. Never give these their own hex. ────────── */
    --rag-green: var(--ok);      --rag-green-bg: var(--ok-bg);
    --rag-amber: var(--warn);    --rag-amber-bg: var(--warn-bg);
    --rag-red: var(--risk);      --rag-red-bg: var(--risk-bg);
    --rag-grey-bg: var(--idle-bg);

    --st-good: var(--ok);        --st-good-bg: var(--ok-bg);    --st-good-ink: var(--ok-ink);
    --st-watch: var(--warn);     --st-watch-bg: var(--warn-bg); --st-watch-ink: var(--warn-ink);
    --st-risk: var(--risk);      --st-risk-bg: var(--risk-bg);
    --st-idle: var(--idle);      --st-idle-bg: var(--idle-bg);

    --err-fg: var(--risk);       --err-bg: var(--risk-bg);      --err-bd: var(--risk-border);
    --pri-urgent-fg: var(--risk);--pri-urgent-bg: var(--risk-bg);--pri-urgent-bd: var(--risk-border);
}

/* Running prose opts IN to the serif; every other element stays Montserrat.
 * Selector list comes from branding.fonts.prose.selectors — see the note there.
 * A selector matching nothing fails SILENTLY: the font never loads and the page
 * quietly stays sans, with no error anywhere. Verify in the browser. */
.sh-intro, .panel-desc, .nav-btn-desc, .doc-desc, .glossary-def, .tier-purpose, .card-desc, .sys-card-desc, .info-card-body, .section-note, .ab-desc, .cm-note { font-family: var(--font-prose); }

/* Demonstration-instance notice, mounted by assets/instance.js when
 * instance.sample_data is true. Neutral chrome, not a warning — see build.mjs. */
.instance-note {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 22px;
  background: var(--chrome-2); color: var(--white);
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.instance-note-tag {
  flex: none; text-transform: uppercase; letter-spacing: .08em;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--brand); color: var(--chrome);
}
.instance-note-body { opacity: .92; }
@media print { .instance-note { display: none; } }