:root {
  /* Colors — Core */
  --ink: #0e0e0e;
  --ink-muted: #555;
  --ink-dark: #333;
  --ink-placeholder: #aaa;
  --paper: #f5f5f5;
  --accent: #1a1aff;
  --rule: hsl(0, 0%, 85.1%);
  --white: #fff;
  --error: #c0392b;

  /* Colors — Surfaces */
  --surface-warm: #e8e4dc;
  --surface-warm-mid: #c8c4bc;
  --surface-neutral: #e0e0e0;
  --surface-accent-soft: #f0f0ff;
  --surface-accent-border: #d0d0ff;

  /* Colors — Accent ink variants (for soft tile text) */
  --ink-accent-dark: #333366;
  --ink-accent-mid: #555577;
  --ink-accent-light: #8888cc;

  /* Colors — Dark surface overlays */
  --on-dark-body: rgba(255,255,255,0.65);
  --on-dark-muted: rgba(255,255,255,0.6);
  --on-dark-subtle: rgba(255,255,255,0.4);
  --dark-card-bg: rgba(255,255,255,0.05);
  --dark-card-border: rgba(255,255,255,0.12);

  /* Typography */
  --font-serif: 'Source Serif 4', serif;
  --font-sans: 'DM Sans', sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Shadows */
  --shadow-card: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.08);

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 100px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}