/* Claude Design System tokens + dark mode override */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* Brand & accent */
  --c-primary:           #3D7D17;
  --c-primary-active:    #2C5E0F;
  --c-primary-disabled:  #e6dfd8;
  --c-accent-teal:       #5db8a6;
  --c-accent-amber:      #e8a55a;

  /* Light surfaces (cream family) */
  --c-canvas:               #faf9f5;
  --c-surface-soft:         #f5f0e8;
  --c-surface-card:         #efe9de;
  --c-surface-cream-strong: #e8e0d2;

  --c-surface-dark:          #181715;
  --c-surface-dark-elevated: #252320;
  --c-surface-dark-soft:     #1f1e1b;

  --c-hairline:      #e6dfd8;
  --c-hairline-soft: #ebe6df;

  --c-ink:          #141413;
  --c-body-strong:  #252523;
  --c-body:         #3d3d3a;
  --c-muted:        #6c6a64;
  --c-muted-soft:   #8e8b82;
  --c-on-primary:   #ffffff;
  --c-on-dark:      #faf9f5;
  --c-on-dark-soft: #a09d96;

  /* Stat panel — dark on light pages */
  --c-panel-bg:        #1f1e1b;
  --c-panel-elev:      #252320;
  --c-panel-hair:      #2a2825;
  --c-panel-ink:       #faf9f5;
  --c-panel-muted:     #a09d96;

  --c-success: #5db872;
  --c-warning: #d4a017;
  --c-error:   #c64545;

  --font-display: "Copernicus", "Tiempos Headline", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-body:    "StyreneB", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px;
  --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px; --s-section: 96px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 24px; --r-pill: 9999px;

  --shadow-soft: 0 1px 3px rgba(20,20,19,0.08);
  --shadow-card: 0 30px 80px -30px rgba(20,20,19,0.18);

  --max-content: 1320px;
}

/* ═════════════ DARK MODE ═════════════
   Inverts page surfaces; flips the stat panel to cream so it still reads
   as a contrast band against the dark page. */
:root[data-theme="dark"] {
  --c-canvas:               #131210;
  --c-surface-soft:         #1b1a17;
  --c-surface-card:         #1f1e1b;
  --c-surface-cream-strong: #252320;

  --c-hairline:      #2a2825;
  --c-hairline-soft: #232220;

  --c-ink:          #f5f1e8;
  --c-body-strong:  #e8e3d6;
  --c-body:         #c5c0b3;
  --c-muted:        #8e8b82;
  --c-muted-soft:   #6c6a64;
  --c-on-dark:      #faf9f5;

  /* Stat panel flips to cream in dark mode so it stays the contrast band */
  --c-panel-bg:    #f3eee3;
  --c-panel-elev:  #e8e0d2;
  --c-panel-hair:  #d8d1c2;
  --c-panel-ink:   #141413;
  --c-panel-muted: #6c6a64;

  --shadow-card: 0 30px 80px -30px rgba(0,0,0,0.6);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--c-canvas);
  color: var(--c-ink);
  margin: 0;
  transition: background-color 320ms ease, color 320ms ease;
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--c-ink);
  margin: 0;
  letter-spacing: -0.025em;
}
em { font-style: italic; }
p { margin: 0; color: var(--c-body); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }