/*
 * InkPick — theme.css
 * Design tokens (light / dark / e-ink), self-hosted font,
 * theme-switch transition and motion kill-switches.
 */

/* ============================================================
   1. DESIGN TOKENS
   Three variants: light (paper), dark (night desk), and an
   e-ink override that removes animation and maximizes contrast.
   ============================================================ */
:root, [data-theme="light"] {
  --paper: #F9F8F3; /* notebook page */
  --card:  #FFFFFF;
  --ink:   #1C1B18; /* main writing ink */
  --ink-soft: #6B6A64;
  --line:  #D9D6CC; /* hairline rules */
  --dot:   #CBC7BA; /* dot-grid */
  --accent:#2A4FA3; /* fountain-pen blue */
  --accent-ink: #FFFFFF;
  --red:   #B23A2F; /* correction red (margin line, delete) */
  --gold:  #8A6D1F; /* priority signifier */
  --row-indent: .8rem; /* left offset shared by task rows and the add row */
  --shadow: 0 1px 3px rgba(28,27,24,.10);
}
[data-theme="dark"] {
  --paper: #14161A;
  --card:  #1C1F25;
  --ink:   #E8E6DF;
  --ink-soft: #9A988F;
  --line:  #33363D;
  --dot:   #2A2D34;
  --accent:#8AA6E8;
  --accent-ink: #10151F;
  --red:   #E07A6D;
  --gold:  #D9B95C;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* E-ink: flat, high-contrast, saturated accents (Kaleido renders
   pure primaries best), and — via the rules at the bottom — zero motion. */
[data-eink="1"] { --paper:#FFFFFF; --card:#FFFFFF; --ink:#000000; --ink-soft:#333333;
  --line:#000000; --dot:#B5B5B5; --accent:#0033CC; --accent-ink:#FFFFFF;
  --red:#CC0000; --gold:#7A5C00; --shadow:none; }
[data-eink="1"][data-theme="dark"] { --paper:#000000; --card:#000000; --ink:#FFFFFF;
  --ink-soft:#CCCCCC; --line:#FFFFFF; --dot:#4A4A4A; --accent:#7FA0FF; --accent-ink:#000000;
  --red:#FF7A6D; --gold:#E8CC70; }

/* Self-hosted handwriting font (Caveat, SIL OFL — see fonts/OFL.txt).
   No network call: the woff2 ships with the app. Falls back to the
   old serif stack while loading or if the file is missing. */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}


/* ============================================================
   6. THEME SWITCH — circular reveal via the View Transitions API
   ============================================================ */
::view-transition-old(root), ::view-transition-new(root) {
  animation: none; mix-blend-mode: normal;
}
::view-transition-new(root) {
  clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 0%));
  animation: vt-reveal .55s ease-out forwards;
}
@keyframes vt-reveal {
  to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0%)); }
}

/* ============================================================
   7. MOTION KILL-SWITCHES — e-ink mode and user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, ::view-transition-new(root) { animation: none !important; transition: none !important; }
}
[data-eink="1"] *, [data-eink="1"] ::view-transition-new(root) {
  animation: none !important; transition: none !important;
  box-shadow: none !important; text-shadow: none !important;
}