/* Gap Hunter Labs -- design tokens (single source): fonts, color, geometry.
   Loaded BEFORE every other sheet. base.css, home.css, catalog.css,
   plugin.css and shell.css do not declare fonts, colors or radii of their
   own; they only consume these tokens.

   Visual language (2026-10-18): engineering notebook. Technical paper in
   light mode, graphite in dark mode, thin rules instead of shadows, square
   corners. Color carries meaning only:
     --inspect (amber)  a gap, a bottleneck, an open measurement
     --valid   (green)  a verified fix, a passing check, a measured result
   Links are ink with an underline; the primary button is solid ink. The
   brand blues live only in the logo.

   WCAG contrast checked by script against bg/surface/surface-2/surface-3:
   text >= 4.5:1, UI borders >= 3:1. Note that the pure amber #F59E0B and
   green #10B981 fail as text on paper (2.0:1 and 2.4:1), so light mode
   uses darker steps of the same hues. */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("/fonts/IBMPlexSans-Latin.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Serif";
    src: url("/fonts/IBMPlexSerif-Regular-Latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Serif";
    src: url("/fonts/IBMPlexSerif-SemiBold-Latin.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Serif";
    src: url("/fonts/IBMPlexSerif-Italic-Latin.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-Latin.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
    --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --radius: 2px;
    --radius-sm: 0;
    --radius-md: 2px;
    --radius-lg: 2px;

    --bg: #F6F8FA;
    --surface: #FFFFFF;
    --surface-2: #F0F3F6;
    --surface-3: #E8ECF0;
    --border: #D0D7DE;
    --border-strong: #7D8590;
    --text: #1F2328;
    --text-dim: #57606A;
    --text-faint: #59636E;
    --accent: #1F2328;
    --accent-hover: #32383F;
    --accent-ink: #FFFFFF;
    --accent-soft: #EAEEF2;
    --brand-navy: #1F2328;
    --inspect: #9A4A08;
    --inspect-bg: #FBF0DF;
    --inspect-line: #F59E0B;
    --valid: #047857;
    --valid-bg: #E3F3EC;
    --valid-line: #10B981;
    --good: #047857;
    --good-bg: #E3F3EC;
    --bad: #B42318;
    --bad-bg: #FBEAE8;
    --warn: #9A4A08;
    --amber: #9A4A08;
    --pending: #57606A;
    --pending-bg: #EAEEF2;
    --cyan: #0A6C8C;
    --purple: #6B4FA8;
    --teal: #0B6E66;
    --shadow: none;
    --shadow-lg: none;
    --shadow-pop: 0 1px 2px rgba(31,35,40,0.08), 0 8px 24px rgba(31,35,40,0.12);
    --focus-ring: 0 0 0 2px #F6F8FA, 0 0 0 4px #1F2328;
}

/* Dark theme. "System" = no data-theme: follows the OS. "Light"/"Dark" =
   data-theme on <html>, applied by /js/theme-init.js before first paint
   from localStorage ("ghl-theme"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0F1115;
      --surface: #121417;
      --surface-2: #171A1F;
      --surface-3: #1C2026;
      --border: #262B33;
      --border-strong: #68717C;
      --text: #E6EDF3;
      --text-dim: #A1ABB6;
      --text-faint: #8B949E;
      --accent: #E6EDF3;
      --accent-hover: #FFFFFF;
      --accent-ink: #0F1115;
      --accent-soft: #1C2026;
      --brand-navy: #E6EDF3;
      --inspect: #F59E0B;
      --inspect-bg: #2A2112;
      --inspect-line: #F59E0B;
      --valid: #10B981;
      --valid-bg: #0F2A21;
      --valid-line: #10B981;
      --good: #10B981;
      --good-bg: #0F2A21;
      --bad: #F47067;
      --bad-bg: #2D1717;
      --warn: #F59E0B;
      --amber: #F59E0B;
      --pending: #A1ABB6;
      --pending-bg: #1C2026;
      --cyan: #4FB3D9;
      --purple: #B39DDB;
      --teal: #3FB8AF;
      --shadow-pop: 0 1px 2px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.45);
      --focus-ring: 0 0 0 2px #0F1115, 0 0 0 4px #E6EDF3;
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0F1115;
    --surface: #121417;
    --surface-2: #171A1F;
    --surface-3: #1C2026;
    --border: #262B33;
    --border-strong: #68717C;
    --text: #E6EDF3;
    --text-dim: #A1ABB6;
    --text-faint: #8B949E;
    --accent: #E6EDF3;
    --accent-hover: #FFFFFF;
    --accent-ink: #0F1115;
    --accent-soft: #1C2026;
    --brand-navy: #E6EDF3;
    --inspect: #F59E0B;
    --inspect-bg: #2A2112;
    --inspect-line: #F59E0B;
    --valid: #10B981;
    --valid-bg: #0F2A21;
    --valid-line: #10B981;
    --good: #10B981;
    --good-bg: #0F2A21;
    --bad: #F47067;
    --bad-bg: #2D1717;
    --warn: #F59E0B;
    --amber: #F59E0B;
    --pending: #A1ABB6;
    --pending-bg: #1C2026;
    --cyan: #4FB3D9;
    --purple: #B39DDB;
    --teal: #3FB8AF;
    --shadow-pop: 0 1px 2px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.45);
    --focus-ring: 0 0 0 2px #0F1115, 0 0 0 4px #E6EDF3;
}

/* .band-dark used to repaint the hero and footer in navy. It now keeps the
   page theme: dark mode is the whole page, not a decorative band. The
   class stays because 300+ generated pages still carry it. */
.band-dark {
    background: transparent;
    color: var(--text);
}

/* Editorial type: serif for page and section headings, sans for body and
   UI, mono for identifiers and measurements. */
h1, h2 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Links in running text: ink with an underline, so they never depend on
   color alone. Components that style their own links override this; the
   search dialog buttons (.ghs-btn) are excluded because their class-only
   rules lose to this selector (0,1,1). */
:where(p, li, dd, td, figcaption, blockquote) a:not(.btn, .ghs-btn) {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
:where(p, li, dd, td, figcaption, blockquote) a:not(.btn, .ghs-btn):hover {
    text-decoration-thickness: 2px;
}