/* Behind the Peg — design tokens v1.1 (light + dark)
   Source of truth: design_handoff_behind_the_peg/README.md
   Light is the default; dark applies on :root[data-theme="dark"].
   PDF/print reports are ALWAYS light — never apply the dark block to print CSS. */

:root {
  color-scheme: light;

  /* surfaces & ink */
  --paper: #FCFCFA;   /* page background */
  --paper-2: #F1F1EC; /* raised / tinted panel */
  --ink: #0E0E0E;     /* text, borders, inverted slab background */
  --ink-2: #1C1C1A;   /* body copy */
  --grey: #77776F;    /* meta, captions */
  --rule: #E4E4DE;    /* hairline inside a card */
  --rule-2: #C9C9C2;  /* muted border / muted text on an inverted slab */

  /* accents — semantic, never decorative */
  --green: #17B26A;   /* peg holds, growth, positive delta, active link */
  --green-2: #0E7A47; /* green text on paper */
  --red: #E5484D;     /* depeg, risk, prohibition, negative delta */
  --red-2: #B3282D;   /* red text on paper */

  /* text on an accent fill — identical in both themes */
  --on-accent: #0E0E0E;

  /* geometry */
  --unit: 4px;                /* everything is a multiple of this */
  --border: 2px;              /* interface border */
  --border-strong: 4px;       /* accent block border */
  --shadow-offset: 4px;       /* hard pixel shadow, no blur */
  --radius: 0;                /* always zero */
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #0E0E0E;
  --paper-2: #1A1A18;
  --ink: #F2F2ED;
  --ink-2: #DDDDD6;
  --grey: #8F8F87;
  --rule: #2E2E2B;
  --rule-2: #454541;

  --green: #2FD98A;
  --green-2: #8FE9BC;
  --red: #FF7074;
  --red-2: #FFA2A4;

  --on-accent: #0E0E0E;
}

/* Dither fills replace a grey scale. Cell = 4px on screen, 2px in print.
   They are drawn with currentColor, so they follow the theme automatically. */
.btp-dither-25 {
  background-image: linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-size: 8px 8px;
}
.btp-dither-50 {
  background-image:
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
.btp-dither-75 {
  background-color: currentColor;
  background-image: linear-gradient(45deg, var(--paper) 25%, transparent 25%, transparent 75%, var(--paper) 75%);
  background-size: 8px 8px;
}