/* ============================================================================
   themes.css - three interpretations of one quiet direction.

   Structure is identical across all three (base.css). What changes is the
   typographic voice and the density:

     sans - neutral, precise, product-engineer
     serif - reading-first, warmer rhythm, for a site that's mostly writing
     mono - technical, tight, everything on a grid

   Colour is near-absent by design: paper, ink, one accent that appears only on
   links, focus rings and hover. Light and dark are both first-class, in all
   three states (no stamp / prefers-color-scheme / explicit data-theme).
   ============================================================================ */

:root {
  /* ---- scale (shared) ---- */
  --s-2: .75rem;
  --s-1: .8125rem;
  --s0:  1rem;
  --s1:  1.0625rem;
  --s2:  1.25rem;
  --s3:  1.5rem;
  --s4:  clamp(1.75rem, 4.5vw, 2.5rem);
  --s5:  clamp(2.25rem, 7vw, 3.5rem);

  --col:     64rem;
  --measure: 42rem;
  --gutter:  clamp(1.5rem, 6vw, 3rem);

  /* ---- light palette (default, un-stamped) ---- */
  --bg:          #FFFFFF;
  --bg-2:        #F5F6F8;
  --fg:          #14181C;
  --fg-2:        #454C54;
  --muted:       #697078;   /* 5.0:1 on --bg, 4.6:1 on --bg-2 (WCAG AA small text) */
  --rule:        #E5E8EB;
  --rule-strong: #C6CBD1;
  --underline:   #D4D8DD;
  --accent:      #0B7A9E;
  /* Destructive actions and errors. The admin used a hard-coded #C8322B,
     which is 3.3:1 on the dark surfaces; the dark value below is 4.6:1+. */
  --danger:      #C8322B;

  /* Hero plate - dark in both themes; it is the site's one inversion. */
  --hero-bg:     #14181C;
  --hero-fg:     #FFFFFF;
  --hero-dim:    #9AA3AB;
  --hero-rule:   #39424B;
  --hero-accent: #58CFF2;
  --hero-scrim:  rgba(12, 10, 9, .74);
  --hero-image:  url('/media/hero-desk.jpg');
  /* Phones get a 960px copy (~30 KB instead of 126 KB): it sits under a 74%
     scrim, so the softer detail never shows. bin/generate.php makes any
     /media/sized/<name>-<width>w file a stylesheet names. */
  --hero-image-sm: url('/media/sized/hero-desk-960w.jpg');

  /* ---- typography defaults (variant: sans) ---- */
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-meta:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-code:    ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --display-weight:   600;
  --display-tracking: -.017em;
  --name-tracking:    -.032em;
  --meta-weight:      500;
  --meta-tracking:    .1em;
  --strong-weight:    600;
}

/* ---- dark, when the OS says so and nothing overrides it ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0E1013;
    --bg-2:        #171A1F;
    --fg:          #ECEFF2;
    --fg-2:        #A5ADB5;
    --muted:       #7B858E;   /* 5.1:1 on --bg, 4.6:1 on --bg-2 */
    --rule:        #21262C;
    --rule-strong: #333A42;
    --underline:   #2E353C;
    --accent:      #58CFF2;
    --danger:      #DA5A54;
    --hero-bg:     #08090B;
    --hero-scrim:  rgba(8, 7, 6, .80);
  }
}

/* ---- dark, chosen explicitly ---- */
:root[data-theme="dark"] {
  --bg:          #0E1013;
  --bg-2:        #171A1F;
  --fg:          #ECEFF2;
  --fg-2:        #A5ADB5;
  --muted:       #7B858E;   /* 5.1:1 on --bg, 4.6:1 on --bg-2 */
  --rule:        #21262C;
  --rule-strong: #333A42;
  --underline:   #2E353C;
  --accent:      #58CFF2;
  --danger:      #DA5A54;
  --hero-bg:     #08090B;
  --hero-scrim:  rgba(8, 7, 6, .80);
}

/* ============================================================================
   VARIANT - classic
   The typeface the 2015 site ran on: Open Sans, self-hosted. Rounder and more
   open than the neutral sans, with looser tracking and a lighter body weight -
   the closest thing here to the original voice of the site.
   ============================================================================ */
:root[data-variant="classic"] {
  --font-display: 'Open Sans Variable', 'Open Sans', 'Open Sans Fallback', 'Open Sans Fallback Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Open Sans Variable', 'Open Sans', 'Open Sans Fallback', 'Open Sans Fallback Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-meta:    'Open Sans Variable', 'Open Sans', 'Open Sans Fallback', 'Open Sans Fallback Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --display-weight:   700;
  --display-tracking: -.012em;
  --name-tracking:    -.022em;
  --meta-weight:      600;
  --meta-tracking:    .13em;
  --strong-weight:    700;
  --body-weight:      400;

  --s0: 1rem;
  --s1: 1.0625rem;
  --s2: 1.25rem;
}

/* The original hero set the name light and airy rather than tightly packed. */
:root[data-variant="classic"] .hero-name { line-height: .95; }