/* ===========================================================================
   tokens.css — the whole visual vocabulary
   Five colours, two families, one spacing scale. If a value is not in here,
   it probably should not be in the design either.
   =========================================================================== */

:root {
  /* --- colour ------------------------------------------------------------
     ink and ground carry every piece of text. signal and deep are bright:
     they go on backgrounds, borders and large type, never on small body
     copy. Which colour may carry text:
       ink on ground      16.3:1
       ink on signal       6.0:1
       ground on deep      7.1:1
     Muted text is ink at 64%, so the palette stays at five names.
     There was a sixth, an orange, which the hobbies page used to lead with.
     That page now looks like every other one, so the orange is gone rather
     than left sitting here unused.                                        */
  --ink:      #0B1B2B;
  --ground:   #FBFBFD;
  --signal:   #0BA5EC;
  --deep:     #5B2FD6;
  --hairline: #E4E8EF;

  --ink-muted: rgba(11, 27, 43, 0.64);
  --ink-soft:  rgba(11, 27, 43, 0.72);
  --ink-body:  rgba(11, 27, 43, 0.78);

  /* Surfaces that are dark in both themes: the summary sheet, the corner
     button, a video slot. In daylight they are the ink colour; at night they
     sit a step above the page so they still read as raised. */
  --sheet:      #0B1B2B;
  --sheet-lift: #12293E;
  --scrim:      rgba(11, 27, 43, 0.58);

  /* Text on a signal fill. A bright fill wants dark type whichever theme is
     on, so this one does not flip. */
  --on-bright: #0B1B2B;

  /* On the dark summary sheet. */
  --on-dark:       #FBFBFD;
  --on-dark-muted: rgba(251, 251, 253, 0.64);
  --on-dark-body:  rgba(251, 251, 253, 0.82);
  --on-dark-line:  rgba(251, 251, 253, 0.16);

  /* Links are ink with a signal underline, so the bright blue never has to
     carry 15px text. This darker shade is for hover only. */
  --signal-deepen: #0A6C9C;

  /* --- type -------------------------------------------------------------- */
  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --text: "Instrument Sans", system-ui, -apple-system, sans-serif;

  --size-display: 84px;
  --size-page:    58px;
  --size-entry:   34px;
  --size-section: 32px;
  --size-sub:     25px;
  --size-lead:    23px;
  --size-body:    18px;
  --size-small:   17px;
  --size-meta:    16px;
  --size-fine:    14px;

  /* --- space ------------------------------------------------------------- */
  --gutter: 96px;
  --measure: 62ch;
  --rhythm: 22px;
  --radius: 12px;
  --radius-pill: 999px;

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Dark
   Same six names, different values — nothing below this line is a new colour
   idea, it is the same palette after dark. Contrast against the night ground
   #0E1A26:
     ink            15.1:1        ink at 64%       6.8:1
     signal          8.2:1        deep             6.5:1
     on-bright on signal          8.1:1

   The block appears twice on purpose. Once for a visitor who picked dark, and
   once for a visitor who never picked anything and whose system is dark — CSS
   has no way to say "either of these" across a media query, and the second
   copy is what makes the site read the system preference with JavaScript off.
   Change one, change the other.
   --------------------------------------------------------------------------- */

:root[data-theme="dark"] {
  --ink:      #E8EEF5;
  --ground:   #0E1A26;
  --signal:   #38BDF8;
  --deep:     #A78BFA;
  --hairline: #22313F;

  --ink-muted: rgba(232, 238, 245, 0.64);
  --ink-soft:  rgba(232, 238, 245, 0.72);
  --ink-body:  rgba(232, 238, 245, 0.78);

  --sheet:      #16263A;
  --sheet-lift: #1E3348;
  --scrim:      rgba(4, 10, 16, 0.72);

  --signal-deepen: #7DD3FC;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:      #E8EEF5;
    --ground:   #0E1A26;
    --signal:   #38BDF8;
    --deep:     #A78BFA;
    --hairline: #22313F;

    --ink-muted: rgba(232, 238, 245, 0.64);
    --ink-soft:  rgba(232, 238, 245, 0.72);
    --ink-body:  rgba(232, 238, 245, 0.78);

    --sheet:      #16263A;
    --sheet-lift: #1E3348;
    --scrim:      rgba(4, 10, 16, 0.72);

    --signal-deepen: #7DD3FC;

    color-scheme: dark;
  }
}

@media (max-width: 900px) {
  :root {
    --size-display: 46px;
    --size-page:    38px;
    --size-entry:   26px;
    --size-section: 26px;
    --size-sub:     22px;
    --size-lead:    19px;
    --size-body:    17px;
    --gutter: 22px;
  }
}