/*
 * theme.css — Marginalia. Monochrome-ink: one ink on one ground, no accent
 * hue anywhere. Hierarchy is carried by size, weight and space, the way a
 * printed page carries itself. Fraunces for display, Newsreader for body.
 */

:root {
  --canvas: #f5f1e7;
  --surface: #fbf9f4;
  --surface-2: #ece5d4;
  --border: #ddd4bf;
  --border-strong: #b8ab8e;
  --ink: #33302a;
  --muted: #64625c;
  --accent: #1e1a15;
  --accent-hover: #33302a;
  --accent-ink: #f5f1e7;
  --accent-text: #1e1a15;
  --accent-strong: #1e1a15;
  --accent-soft: #ece5d4;
  --accent-border: #b8ab8e;
  --success: #3f5d3a;
  --success-ink: #ffffff;
  --success-soft: #e4e9de;
  --success-strong: #33502e;
  --warning: #7a5a20;
  --warning-ink: #ffffff;
  --warning-soft: #ece2cd;
  --warning-strong: #654a19;
  --danger: #7a2e22;
  --danger-ink: #ffffff;
  --danger-soft: #ecdcd6;
  --danger-strong: #652419;
  --chart-1: #1e1a15;
  --chart-2: #4a463d;
  --chart-3: #6e6a5e;
  --chart-4: #948d78;
  --chart-5: #b8ab8e;
  --chart-6: #33302a;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Newsreader", ui-serif, Georgia, serif;
  --font-sans: "Newsreader", ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 2px;
  --radius-card: 4px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 12px 32px -12px color-mix(in srgb, var(--ink) 28%, transparent);
  --shadow-btn: none;
  --card-pad: 1.75rem;
  --caps: none;
  --btn-weight: 500;
  --measure: 68ch;

  /* The dark statement band always inverts to ink-on-paper, in either mode. */
  --x-band-bg: #1e1a15;
  --x-band-ink: #f5f1e7;
  --x-band-muted: #b8ab8e;
}

html[data-theme="dark"] {
  --canvas: #1c1912;
  --surface: #242019;
  --surface-2: #2c271e;
  --border: #3a342a;
  --border-strong: #55503f;
  --ink: #f2ecdd;
  --muted: #b3ab97;
  --accent: #f2ecdd;
  --accent-hover: #ffffff;
  --accent-ink: #1c1912;
  --accent-text: #f2ecdd;
  --accent-strong: #f2ecdd;
  --accent-soft: #2c271e;
  --accent-border: #55503f;
  --success: #7fa377;
  --success-ink: #16210f;
  --success-soft: #263524;
  --success-strong: #9dbd95;
  --warning: #c9a361;
  --warning-ink: #241a06;
  --warning-soft: #362b18;
  --warning-strong: #d9ba8b;
  --danger: #c98572;
  --danger-ink: #2a0f08;
  --danger-soft: #382019;
  --danger-strong: #dba594;
  --chart-1: #f2ecdd;
  --chart-2: #cec6b0;
  --chart-3: #aaa28b;
  --chart-4: #857e69;
  --chart-5: #625c4a;
  --chart-6: #dfd8c4;

  --x-band-bg: #100e0a;
  --x-band-ink: #f5f1e7;
  --x-band-muted: #b8ab8e;
}

/*
 * app.css — Marginalia's own rules: the dark statement band, the margin
 * annotations beside the manifesto, small caps for an attribution line, and
 * the typewriter cursor. Everything here reads a token; nothing is a literal.
 */

/* The dark band always inverts to ink-on-paper, in either site mode — its
   own tokens (see theme.css), never the palette's. */
.ink-band {
  background: var(--x-band-bg);
  color: var(--x-band-ink);
}
.ink-band-muted {
  color: var(--x-band-muted);
}

.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

/* Handwritten-feeling asides in the manifesto's margin. */
.annotation {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
  transform: rotate(-1.2deg);
  position: relative;
}
.annotation::before {
  content: "\2014\00a0";
}
.annotation-alt {
  transform: rotate(1deg);
}

/* The hero headline types itself out once; app.js drives the character
   reveal, this just draws the cursor while it runs. */
[data-typewriter] {
  position: relative;
}
[data-typewriter].is-typing::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.85em;
  margin-left: 0.04em;
  background: currentColor;
  vertical-align: -0.05em;
  animation: caret-blink 900ms steps(1) infinite;
}
@keyframes caret-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
html.reduced-motion [data-typewriter].is-typing::after {
  animation: none;
  opacity: 0;
}