/* Style theme: colours + fonts (spacing lives in layout.css).
   Three variants — <html data-theme="inverse|light|dark">.
   inverse (the default): one ink on its opposite, sans throughout, square corners.
     It runs against the system's colour scheme: white on black when the system is
     light, slate on sand when it is dark.
   light, dark: ink-on-paper. Near-black text for maximum readability, dark hairline
     rules and borders so structure/graphics pop like print, a subtle --hair for
     gridlines. */
@layer theme {
  :root, [data-theme="light"] {
    --bg: #ffffff;   --fg: #111318;   --muted: #565b63;   --line: #34393f;
    --hair: #dcdfe4; --soft: #f3f5f7; --soft2: #e7effb;   --heading: #2b3038;
    --accent: #16824a; --danger: #b3261e;
    --serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  }
  [data-theme="dark"] {
    --bg: #0f1114;   --fg: #f3f4f6;   --muted: #9ea4ae;   --line: #4a515b;
    --hair: #262b31; --soft: #191c21; --soft2: #16202e;   --heading: #c6ccd4;
    --accent: #46c882; --danger: #ff6f6f;
    --serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  }

  [data-theme="inverse"] {
    --bg: #000000;   --fg: #ffffff;   --muted: #a3a3a3;   --line: #ffffff;
    --hair: #333333; --soft: #161616; --soft2: #222222;   --heading: #ffffff;
    --accent: #ffffff; --danger: #ff6a55;
    --font:  "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: var(--font);
    --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
    --radius: 0;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="inverse"] {
      --bg: #ddca7e;   --fg: #1e1f26;   --muted: #6b6030;   --line: #1e1f26;
      --hair: #c2b06a; --soft: #d0bd72; --soft2: #c2b06a;   --heading: #1e1f26;
      --accent: #1e1f26; --danger: #9b1c10;
    }
  }
  /* inverse sets its type too: a heavy tight title, sentence-case headings, and
     controls that fill with ink on hover. */
  [data-theme="inverse"] body { font-kerning: normal; font-variant-numeric: tabular-nums; }
  [data-theme="inverse"] h1 { font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
  [data-theme="inverse"] :is(h2, h3, h4) { text-transform: none; letter-spacing: -.02em; font-weight: 700; color: var(--fg); }
  [data-theme="inverse"] h2 { font-size: 1.25rem; }
  [data-theme="inverse"] :is(h3, h4) { font-size: 1.0625rem; }
  [data-theme="inverse"] a { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
  [data-theme="inverse"] code { border: 0; border-radius: 0; }
  [data-theme="inverse"] button { background: transparent; }
  [data-theme="inverse"] button:is(:hover, :focus-visible) { background: var(--fg); color: var(--bg); }
  [data-theme="inverse"] :is(input, select, textarea):focus { outline-offset: 2px; }
  [data-theme="inverse"] .ui-stat { background: transparent; }
  [data-theme="inverse"] .ui-stat__num { font-size: 2.5rem; line-height: 1; letter-spacing: -.05em; }
}