/* ==========================================================================
   Design tokens: color, type, and theme values shared by every stylesheet.
   ========================================================================== */

:root {
  /* Color */
  --paper: #EEF1F4;
  --surface: #FFFFFF;
  --ink: #13203A;
  --steel: #56667B;
  --rule: #C9D1DA;
  --signal: #F2B705;
  --signal-ink: #13203A;
  --link: #1F4FA8;

  /* Blueprint layer */
  --grid: rgba(86, 102, 123, 0.09);
  --grid-major: rgba(86, 102, 123, 0.15);
  --schem: rgba(31, 79, 168, 0.28);

  /* Type */
  --display: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --name-weight: 700;
  --head-weight: 700;

  /* Layout */
  --content-width: 60rem;
  --gutter: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1829;
    --surface: #16223A;
    --ink: #E6EBF1;
    --steel: #97A6B9;
    --rule: #2B3A55;
    --link: #8DB4FF;
    --grid: rgba(151, 166, 185, 0.07);
    --grid-major: rgba(151, 166, 185, 0.12);
    --schem: rgba(141, 180, 255, 0.24);
  }
}

:root[data-theme="dark"] {
  --paper: #0F1829;
  --surface: #16223A;
  --ink: #E6EBF1;
  --steel: #97A6B9;
  --rule: #2B3A55;
  --link: #8DB4FF;
  --grid: rgba(151, 166, 185, 0.07);
  --grid-major: rgba(151, 166, 185, 0.12);
  --schem: rgba(141, 180, 255, 0.24);
}