/*
  Design tokens: the only place a color value appears. The page is an eye chart
  (app/CLAUDE.md, "Design"): black ink on white, inverted in dark mode, and the duochrome
  red/green pair from the bottom of a real chart, used for ONE thing only: the BEFORE/AFTER
  labels and the two edges of the compare divider. No other accent anywhere.
*/
@font-face {
  font-family: "Optician Sans";
  src: url("../fonts/OpticianSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #ffffff;
  --ink: #111111;
  --ink-gray: #767676; /* 4.5:1 on white: acuity labels, sublabels, status */
  --ink-hairline: #d4d4d4; /* the empty part of the progress bar only */
  /* Duochrome blocks carry black letters; red nudged from #d81e05 so black reaches 5:1. */
  --duochrome-red: #e8380d;
  --duochrome-green: #0f9d58;
  --on-duochrome: #000000;
  --photo-frame: var(--ink);

  --font-chart: "Optician Sans", "Arial Black", Arial, sans-serif;
  --font-plain: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Chart letters are tracked wide, like optotypes spaced one letter-width apart. */
  --chart-tracking: 0.12em;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;

  --chart-width: 820px;
  --sheet-width: 1240px;
  --acuity-gutter: 4.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000000;
    --ink: #f4f4f4;
    --ink-gray: #8c8c8c;
    --ink-hairline: #333333;
  }
}