/* Design tokens — from Design System.html */

:root {
  /* Paper (light) */
  --paper-0: #fbf8f2;
  --paper-1: #f5f1e8;
  --paper-2: #ede8db;
  --paper-3: #e2dccb;
  --paper-line: #d9d2be;
  --paper-line-soft: #e8e2d0;

  /* Ink */
  --ink-0: #1a1512;
  --ink-1: #3d342b;
  --ink-2: #6b5e51;
  --ink-3: #948876;
  --ink-4: #bcb09c;

  /* Accent — sumi ink red */
  --accent: #9b3a2b;
  --accent-hover: #83301f;
  --accent-soft: #f4e4dc;
  --accent-line: #d9a797;

  /* Highlights */
  --hl-amber: #f3d66a;
  --hl-sage:  #c5d8a5;
  --hl-sky:   #aecde0;
  --hl-rose:  #e8b3a9;
  --hl-lilac: #c9b9d9;

  /* Status */
  --success: #5c7a3f;
  --warning: #a87a2a;
  --danger:  #9b3a2b;

  /* Fonts */
  --font-serif: "Literata", "Noto Serif JP", Georgia, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Reader */
  --reader-measure: 720px;
  --reader-size: 19px;
  --reader-line: 1.75;

  /* Motion */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 400ms;
  --ease-spring: cubic-bezier(.3,.8,.3,1);

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Radius */
  --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-2xl: 24px; --r-full: 999px;

  /* Shadows (warm) */
  --sh-0: 0 1px 0 rgba(61,52,43,0.04);
  --sh-1: 0 1px 2px rgba(61,52,43,0.06), 0 2px 4px rgba(61,52,43,0.04);
  --sh-2: 0 4px 12px rgba(61,52,43,0.08), 0 2px 4px rgba(61,52,43,0.04);
  --sh-3: 0 12px 32px rgba(61,52,43,0.12), 0 4px 8px rgba(61,52,43,0.06);
  --sh-4: 0 24px 64px rgba(61,52,43,0.16), 0 8px 16px rgba(61,52,43,0.08);
}

/* Theme: Sepia */
body[data-theme="sepia"] {
  --paper-0: #f5ead0;
  --paper-1: #efe2c2;
  --paper-2: #e6d7b0;
  --paper-3: #dcc99a;
  --paper-line: #cfbb88;
  --ink-0: #2a1f12;
  --ink-1: #433224;
  --ink-2: #6b5133;
}

/* Theme: Dusk (dark warm) */
body[data-theme="dusk"] {
  --paper-0: #1f1a16;
  --paper-1: #26211c;
  --paper-2: #2e2923;
  --paper-3: #3a342c;
  --paper-line: #423b32;
  --paper-line-soft: #352f28;
  --ink-0: #ebe2cf;
  --ink-1: #cfc3ad;
  --ink-2: #9d8f77;
  --ink-3: #7a6d5a;
  --accent: #d66e5c;
  --accent-hover: #e88c7b;
  --accent-soft: #3a241c;
  --accent-line: #5e3b30;
}

/* Theme: OLED */
body[data-theme="oled"] {
  --paper-0: #000000;
  --paper-1: #0a0a0a;
  --paper-2: #141414;
  --paper-3: #1f1f1f;
  --paper-line: #2a2a2a;
  --paper-line-soft: #1a1a1a;
  --ink-0: #ebe2cf;
  --ink-1: #cfc3ad;
  --ink-2: #9d8f77;
  --ink-3: #7a6d5a;
  --accent: #d66e5c;
  --accent-hover: #e88c7b;
  --accent-soft: #2a1a14;
  --accent-line: #4e2e24;
}

/* Highlight marks — always dark ink on pastel bg regardless of theme */
.hl-mark, .hl-mark * { color: #1a1512 !important; }
.hl-mark.amber { background: var(--hl-amber); }
.hl-mark.sage  { background: var(--hl-sage); }
.hl-mark.sky   { background: var(--hl-sky); }
.hl-mark.rose  { background: var(--hl-rose); }
.hl-mark.lilac { background: var(--hl-lilac); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}