/* ───────────── Paper & ink — the second theme ─────────────
   Applies when <html data-style="paper">. It re-points the same tokens app.css
   uses and adds a few component touches (ruled notes, washi-tape labels,
   highlighter tags, pen-tick checkboxes). No markup changes, and it composes
   with the light/dark switch: cream desk by day, an inked-navy desk at night.
   Body copy stays in the app's rounded Nunito; only headings and the wordmark
   take the soft serif (Fraunces, loaded on demand). */

:root[data-style="paper"] {
  /* Paper keeps its own, inkier palette. Classic is the pastel "Strawberry milk",
     so this theme restates the accent and card colours instead of inheriting them. */
  --accent: oklch(67.9% 0.215 39.5);
  --accent-hover: oklch(64.5% 0.208 38.7);
  --accent-press: oklch(61.2% 0.198 38.6);
  --on-accent: oklch(100% 0 0);
  --accent-ink: var(--accent);
  --focus: var(--accent);
  --selection: oklch(67.9% 0.215 39.5 / 0.22);
  --toast-action: var(--accent);
  --tick: oklch(100% 0 0);
  --tint: 11%;
  --blue: oklch(62.3% 0.188 259.8);
  --orange: oklch(67.9% 0.215 39.5);
  --pink: oklch(68% 0.218 357.4);
  --green: oklch(74.4% 0.168 148.2);
  --purple: oklch(61.8% 0.206 271.1);
  --brown: oklch(65.9% 0.066 61.5);
  --gray: oklch(55.1% 0.023 264.4);
  --blue-ink: var(--blue);

  --bg: oklch(94.5% 0.025 86.9);
  --board: oklch(91.2% 0.032 87.3);
  --surface: oklch(99.4% 0.009 93.6);
  --surface-2: oklch(92.6% 0.031 88.4);
  --line: oklch(45% 0.05 80 / 0.16);
  --line-strong: oklch(84.2% 0.048 88.3);
  --text: oklch(31% 0.05 263.4);
  --text-2: oklch(39% 0.048 263.8);
  --muted: oklch(56.7% 0.019 88.1);
  --faint: oklch(71.8% 0.029 93.2);
  --hover: oklch(45% 0.05 80 / 0.08);
  --shadow-card: 0 1px 0 oklch(30% 0.05 80 / 0.14), 0 5px 12px -3px oklch(35% 0.06 80 / 0.2);
  --shadow-pop: 0 12px 32px -8px oklch(30% 0.05 80 / 0.3), 0 0 0 1px oklch(30% 0.05 80 / 0.1);
  --shadow-ghost: 0 18px 40px -10px oklch(30% 0.05 80 / 0.4), 0 0 0 1px oklch(30% 0.05 80 / 0.1);

  --tag-fg: var(--text);
  --tag-bg: oklch(93.5% 0.11 95);
  --hl: oklch(90.5% 0.13 95);
  --rule: oklch(62% 0.09 250 / 0.22);
  --ink-blue: oklch(48.1% 0.163 263.6);
  --grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mark: var(--font-display);
  --radius-card: 4px;
}

:root[data-style="paper"][data-theme="dark"] {
  --tint: 16%;
  --blue: oklch(69.3% 0.162 259.0);
  --orange: oklch(76% 0.155 47.6);
  --pink: oklch(75.1% 0.174 352.9);
  --green: oklch(80.6% 0.152 151.2);
  --purple: oklch(72% 0.146 275.7);
  --brown: oklch(78.2% 0.068 66.6);
  --gray: oklch(70.3% 0.011 248.0);
  --accent: oklch(67.9% 0.215 39.5);
  --accent-hover: oklch(64.5% 0.208 38.7);
  --accent-press: oklch(61.2% 0.198 38.6);
  --on-accent: oklch(100% 0 0);
  --accent-ink: var(--accent);
  --focus: var(--accent);
  --selection: oklch(67.9% 0.215 39.5 / 0.22);
  --toast-action: var(--accent);
  --tick: oklch(100% 0 0);
  --blue-ink: var(--blue);

  --bg: oklch(22.7% 0.019 266.2);
  --board: oklch(19.5% 0.013 264.2);
  --surface: oklch(26.4% 0.024 264);
  --surface-2: oklch(31.6% 0.029 262.8);
  --line: oklch(92% 0.05 90 / 0.1);
  --line-strong: oklch(92% 0.05 90 / 0.19);
  --text: oklch(92.8% 0.024 90.8);
  --text-2: oklch(83.4% 0.026 89.2);
  --muted: oklch(64.4% 0.012 89.8);
  --faint: oklch(92% 0.05 90 / 0.3);
  --hover: oklch(92% 0.05 90 / 0.07);
  --shadow-card: 0 1px 0 oklch(0% 0 0 / 0.4), 0 6px 14px -4px oklch(0% 0 0 / 0.5);
  --shadow-pop: 0 16px 36px -8px oklch(0% 0 0 / 0.6), 0 0 0 1px oklch(92% 0.05 90 / 0.1);
  --shadow-ghost: 0 20px 44px -10px oklch(0% 0 0 / 0.7), 0 0 0 1px oklch(92% 0.05 90 / 0.12);

  --tag-fg: var(--text);
  --tag-bg: oklch(45% 0.07 85 / 0.55);
  --hl: oklch(72% 0.13 88 / 0.42);
  --rule: oklch(78% 0.06 250 / 0.13);
  --ink-blue: oklch(76.4% 0.12 266.3);
  --grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── desk and chrome ── */
:root[data-style="paper"] .view,
:root[data-style="paper"] .topbar {
  background-image: var(--grain);
  background-size: 180px 180px;
}
:root[data-style="paper"] .col.day { background: transparent; }
:root[data-style="paper"] .topbar { border-bottom: 1px dashed var(--line-strong); }

/* wordmark: one ink colour, no wobble, a hand-drawn squiggle underneath */
:root[data-style="paper"] .wordmark { position: relative; font-weight: 700; letter-spacing: -0.02em; }
:root[data-style="paper"] .wordmark span { color: var(--text); transform: none; }
:root[data-style="paper"] .wordmark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 5px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath d='M0 3Q2.5 0 5 3T10 3' fill='none' stroke='%23e2601a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
}

/* view switcher: loose index tabs instead of a pill track */
:root[data-style="paper"] .seg { background: transparent; padding: 0; gap: 4px; }
:root[data-style="paper"] .seg button { border-radius: 8px 8px 3px 3px; font-weight: 700; }
:root[data-style="paper"] .seg button[aria-selected="true"] { background: var(--surface); box-shadow: 0 -1px 0 var(--line-strong), var(--shadow-card); }

:root[data-style="paper"] .search input { border-radius: 8px; border-color: var(--line); }
:root[data-style="paper"] .btn,
:root[data-style="paper"] .ghost-btn { border-radius: 7px; }
:root[data-style="paper"] .menu,
:root[data-style="paper"] .results,
:root[data-style="paper"] dialog.confirm,
:root[data-style="paper"] dialog.expand-dialog { border-radius: 8px; }

/* ── cards: paper with ruled lines ── */
:root[data-style="paper"] .card,
:root[data-style="paper"] .tag-col { border: 0; }
:root[data-style="paper"] .note-text,
:root[data-style="paper"] .today-grid .note-text { line-height: 24px; }
:root[data-style="paper"] .note-text {
  background-image: repeating-linear-gradient(to bottom, transparent 0 23px, var(--rule) 23px 24px);
}
:root[data-style="paper"] .expand-editor { line-height: 27px; }
:root[data-style="paper"] .expand-editor .ed {
  background-image: repeating-linear-gradient(to bottom, transparent 0 26px, var(--rule) 26px 27px);
}
:root[data-style="paper"] .item:not(.heading) { border-radius: 0; border-bottom: 1px solid var(--rule); }

/* stitched column dividers */
:root[data-style="paper"] .col { border-right-style: dashed; border-right-color: var(--line-strong); }
:root[data-style="paper"] .tag-entry { border-bottom-style: dashed; border-bottom-color: var(--line-strong); }

/* ── labels: washi tape ── */
:root[data-style="paper"] .pill {
  padding: 6px 18px;
  border-radius: 0;
  background: color-mix(in oklab, var(--pill-fg, var(--gray)) 36%, var(--surface));
  color: var(--text);
  font-weight: 700;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%, 5px 50%);
}
/* clip-path would cut a normal outline off, so the focus ring is drawn inside */
:root[data-style="paper"] .pill:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
:root[data-style="paper"] .pill-input { border-radius: 3px; }

/* ── tags: highlighter ── */
:root[data-style="paper"] .tag {
  color: var(--text);
  background: linear-gradient(transparent 44%, var(--hl) 44%);
  border-radius: 0;
  box-shadow: none;
}

/* ── checkboxes: a pen tick ── */
:root[data-style="paper"] .check { border-radius: 4px; border-color: color-mix(in oklab, var(--text) 50%, var(--surface)); }
:root[data-style="paper"] .check:hover { border-color: var(--ink-blue); }
:root[data-style="paper"] .check[aria-checked="true"] { background: transparent; border-color: var(--text-2); }
:root[data-style="paper"] .check svg { width: 17px; height: 17px; color: var(--ink-blue); }