/*
 * Shared illustration theme — mirrors the blog's global.css
 * Import this in every illustration HTML:
 *   <link rel="stylesheet" href="/illustrations/theme.css">
 *
 * Then use var(--bg), var(--surface), var(--text), etc.
 * Override --accent-* per illustration for functional color coding.
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

:root {
  /* Base palette — matches blog dark mode */
  --bg: #000000;
  --surface: #0f0f0f;
  --surface-raised: #1a1a1a;
  --card: #111111;
  --text: #ffffff;
  --text-secondary: #a0a0a0;
  --muted: #666666;
  --border: #2a2a2a;
  --border-hover: #3a3a3a;
  --accent: #FF3131;
  --accent-hover: #ff5252;

  /* Typography */
  --font-heading: 'Source Serif Pro', Georgia, serif;
  --font-body: 'Source Serif Pro', Georgia, serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
}

/* Light mode — only via explicit data-theme attribute */
[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --surface-raised: #eeeeee;
  --card: #fafafa;
  --text: #111111;
  --text-secondary: #555555;
  --muted: #888888;
  --border: #dddddd;
  --border-hover: #cccccc;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 17px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}