/* ═══════════════════════════════════════════════════════════════
   STYLEGUIDE.CSS — single source of truth for tokens, palette and
   fonts on atcooper.net.

   Architecture:
     this file       → tokens (colours, fonts) + base font cascade
     theme.css       → light/dark toggle widget + raw-hex mop-ups
     page <style>    → page-specific layout only, references tokens

   Loaded BEFORE each page's inline <style> in the head, so page
   blocks can still override a single token in a one-off — but the
   defaults all live here. Next iteration of the palette: edit this
   file, redeploy, done.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ─── Neutral palette (dark-mode defaults) ─── */
  --ink:    #415443;
  --bone:   #e8e2da;
  --dark:   #0a0a0a;
  --dim:    #333;
  --mid:    #666;
  --light:  #999;
  --bright: #e0e0e0;

  /* ─── Brand greens ─── */
  --atcr:   #415443;
  --claude: #434C41;

  /* ─── Accent triad — muddied Bauhaus ──────────────────────────
     Borders/strong fills: saturated and confident.
     -text variants: lifted for legibility against the dark page bg.
     Light mode overrides further down.
     ─────────────────────────────────────────────────────────── */
  --warm:        #A8252E;   /* crimson    — Music section, status:filed */
  --accent:      #1B4480;   /* phthalo    — Language & AI, status:complete */
  --burnt:       #D08725;   /* burnt orange — Other Research */
  --warm-text:   #E66B7A;
  --accent-text: #7AA0DD;
  --burnt-text:  #ECB75A;

  /* ─── Section role mappings ─── */
  --music-c:    var(--warm);
  --lang-c:     var(--accent);
  --other-c:    var(--burnt);
  --music-text: var(--warm-text);
  --lang-text:  var(--accent-text);
  --other-text: var(--burnt-text);

  /* ─── Fonts ─── */
  --font-mono: 'IBM Plex Mono', 'Courier New', Courier, monospace;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — accent triad pulled deeper for contrast on cream.
   On cream the base values are already dark enough to use as text,
   so the -text variants collapse onto the base values.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --dark:   #f6f0e7;
  --bone:   #0a0a0a;
  --dim:    #8a847a;
  --mid:    #5a544c;
  --light:  #3a342c;
  --bright: #0a0a0a;

  --warm:        #8E1F28;
  --accent:      #163766;
  --burnt:       #A65C18;
  --warm-text:   #8E1F28;
  --accent-text: #163766;
  --burnt-text:  #A65C18;
}

/* ═══════════════════════════════════════════════════════════════
   BASE FONT CASCADE
   The site's voice is mono. Discursive longform prose gets sans
   so readers don't drown in serif-typewriter texture.
   ═══════════════════════════════════════════════════════════════ */
html, body {
  font-family: var(--font-mono);
}

p,
blockquote,
.body-text,
.prose,
.tool-desc,
.section-blurb,
.intro p {
  font-family: var(--font-sans);
}

/* Escape hatch: anything inside .mono stays mono no matter what. */
.mono, .mono * { font-family: var(--font-mono) !important; }