/* Namechecked brand tokens, shared by the public site, client reports and diagrams. See docs/brand.md.
   Light, near-black text, one accent colour. Skins: the default light look (the website), "tint" (the site's grey bands),
   "paper" (pure white: printed pages and PDFs) and "night" (black, kept for on-screen reports). */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* light skin (default): off-white page, near-black text, greys */
  --page: #fafafa;
  --panel: #f3f3f3;
  --card: #ffffff;
  --ink: #0a0a0a;
  --muted: #525252;
  --soft: #6b6b6b;            /* sublabels; 5.0:1 on --page */
  --rule: #ededed;            /* background grid, faint dividers */
  --rule-strong: #e0e0e0;     /* hairline borders */
  /* the one accent colour: signal orange. Use it on one or two focal things per view. */
  --accent: #ff5a1f;          /* fills, borders and marks */
  --accent-text: #c2410c;     /* accent used as small text on light: 5.0:1 */
  --accent-tint: rgba(255, 90, 31, 0.08);
  --accent-ink: #0a0a0a;      /* text on an --accent fill */
  /* states, for client reports only (pass / attention / fail). The site stays monochrome. */
  --ok: #15803d;
  --warn: #a16207;
  --bad: #b91c1c;
  --placeholder: #525252;     /* unfilled [placeholders]: dashed outline, never decoration */

  --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --grid: 64px;               /* hairline background grid */
  --radius: 6px;
  --radius-lg: 12px;
  color-scheme: light;
}

/* tint: the soft grey bands of the site, so sections alternate without going dark */
[data-skin="tint"] {
  --page: #f2f2f2;
  --panel: #fafafa;
  --card: #ffffff;
  --rule: #e6e6e6;
  --rule-strong: #dcdcdc;
}

/* steel: the home page. Cool light grey, near-black seams and type, the same orange. Tiles meet at one ink seam. */
[data-skin="steel"] {
  --page: #e4e6e9;
  --panel: #eceef0;
  --card: #f4f5f6;
  --ink: #1a1b1d;
  --muted: #4a4d52;
  --soft: #5d6166;            /* sublabels; 5.0:1 on --page */
  --rule: #cfd3d8;            /* column lines, dotted leaders */
  --rule-strong: #1a1b1d;     /* the seam between tiles */
  --night: #1a1b1d;           /* dark tiles */
  --night-ink: #e9ebee;
  --night-soft: #9a9ea4;
  --night-line: #2e3034;
  --accent-text: #b8390a;     /* accent as small text on steel: 4.6:1 */
}

[data-skin="night"] {
  /* night skin: black, for on-screen client reports that want it */
  --page: #0a0a0a;
  --panel: #111111;
  --card: #171717;
  --ink: #f5f5f5;
  --muted: #a3a3a3;
  --soft: #8a8a8a;            /* sublabels; 5.6:1 on --page */
  --rule: #161616;            /* background grid, faint dividers */
  --rule-strong: #262626;     /* hairline borders */
  /* the one accent colour: signal orange. Use it on one or two focal things per view. */
  --accent: #ff5a1f;          /* 6.3:1 on --page */
  --accent-text: #ff7a47;     /* accent used as small text on --page */
  --accent-tint: rgba(255, 90, 31, 0.10);
  --accent-ink: #0a0a0a;      /* text on an --accent fill */
  /* states, for client reports only (pass / attention / fail). The site stays monochrome. */
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --placeholder: #d4d4d4;     /* unfilled [placeholders]: dashed outline, never decoration */

  color-scheme: dark;
}

[data-skin="paper"] {
  --page: #ffffff;
  --panel: #fafafa;
  --card: #ffffff;
  --ink: #0a0a0a;
  --muted: #525252;
  --soft: #6b6b6b;
  --rule: #f2f2f2;
  --rule-strong: #e5e5e5;
  --accent: #ff5a1f;          /* fills, borders and marks on white */
  --accent-text: #c2410c;     /* accent as text on white: 5.2:1 */
  --accent-tint: rgba(255, 90, 31, 0.08);
  --accent-ink: #0a0a0a;
  --ok: #15803d;
  --warn: #a16207;
  --bad: #b91c1c;
  --placeholder: #525252;
  color-scheme: light;
}