/* ============================================================
   base.css — Reset, fonts, design tokens, typography
   ============================================================ */

/* --- Fonts --------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* --- Design Tokens -------------------------------------- */
:root {
  --font-heading: "Crimson Pro", Georgia, "Times New Roman", "Songti SC", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;

  --max-width: 750px;
  --radius: 4px;

  /* Light palette — classic academic */
  --color-bg: #fdfcfb;
  --color-bg-warm: #f8f5f2;
  --color-surface: #ffffff;
  --color-text: #1b1622;
  --color-text-heading: #0d0a12;
  --color-text-secondary: #5e5868;
  --color-text-tertiary: #928b9a;
  --color-border: #e6e2de;
  --color-border-light: #f0ece8;
  --color-accent: #8b1a2b;
  --color-accent-hover: #691421;
  --color-accent-subtle: #fdf2f3;
  --color-navy: #1e3a5f;
  --color-navy-subtle: #eef2f7;
  --color-gold: #b8860b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] {
  --color-bg: #17141a;
  --color-bg-warm: #1e1a22;
  --color-surface: #221e26;
  --color-text: #e4e0e8;
  --color-text-heading: #f0ecf4;
  --color-text-secondary: #9a94a4;
  --color-text-tertiary: #6e6876;
  --color-border: #332e38;
  --color-border-light: #2a252e;
  --color-accent: #d4646e;
  --color-accent-hover: #e89098;
  --color-accent-subtle: #2d1a1e;
  --color-navy: #7a9ec4;
  --color-navy-subtle: #1a2430;
  --shadow-sm: none;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* --- Reset --------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-bg);
  transition: background 0.3s, color 0.3s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Typography ---------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: 2.5rem; letter-spacing: -0.03em; }
h2 { font-size: 1.45rem; font-weight: 500; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; font-weight: 600; }

p { margin-bottom: 1rem; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-bg-warm);
  padding: 0.15em 0.45em;
  border-radius: 3px;
  color: var(--color-accent);
}

pre {
  background: var(--color-bg-warm);
  padding: 1.25rem;
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: 1.25rem;
  border: 1px solid var(--color-border-light);
}
pre code {
  background: none;
  padding: 0;
  color: var(--color-text);
}

blockquote {
  border-left: 3px solid var(--color-accent);
  margin: 1.25rem 0;
  padding: 0.5rem 1.25rem;
  color: var(--color-text-secondary);
  font-style: italic;
  background: var(--color-accent-subtle);
  border-radius: 0 var(--radius) var(--radius) 0;
}

ul, ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
li { margin-bottom: 0.3rem; }

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* --- Utilities ----------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}