/* /todo design harness (task #2152) - tokens + reset only.
   Values are lifted verbatim from the app's V3 "minimals" dark tokens
   (app/src/v2/theme/tokens-minimals.js) so a direction Mike picks here drops
   into the real app without a repaint. Variants must reference roles, never
   invent a hex. */

:root {
  /* emerald - the single accent */
  --accent: #00A76F;
  --accent-light: #5BE49B;
  --accent-lighter: #C8FAD6;
  --accent-dark: #007867;
  --accent-ch: 0 167 111;

  /* surfaces (dark only - the app is dark-only) */
  --canvas: #141A21;
  --paper: #1C252E;
  --raised: #28323D;
  --hairline: rgba(145,158,171,0.20);
  --hairline-strong: rgba(145,158,171,0.32);

  /* text */
  --text: #FFFFFF;
  --text-2: #919EAB;
  --text-3: #637381;

  /* status */
  --success: #22C55E;
  --warning: #FFAB00;
  --error: #FF5630;
  --info: #00B8D9;

  /* the three categories - fixed, forever */
  --cat-personal: #FF5C7C;
  --cat-career: #00B8D9;
  --cat-hobby: #FFAB00;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  --shadow-card: 0 0 2px 0 rgba(0,0,0,0.20), 0 12px 24px -4px rgba(0,0,0,0.36);
  --shadow-pop: 0 0 2px 0 rgba(0,0,0,0.24), -20px 20px 40px -4px rgba(0,0,0,0.48);

  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { background: var(--canvas); color-scheme: dark; }
body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
input, textarea { background: none; border: 0; outline: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: rgba(var(--accent-ch) / .32); }

/* Scrollbars: present on desktop, invisible on mobile - never a decorative rail. */
* { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- harness chrome (never part of a variant's design) ---- */
.tk-back {
  position: fixed; left: 12px; bottom: 12px; z-index: 200;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-pill);
  background: rgba(28,37,46,.92); border: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--text-2);
  box-shadow: var(--shadow-card);
}
.tk-back:hover { color: var(--text); border-color: var(--hairline-strong); }
.tk-back b {
  font-weight: 700; font-size: 11px; color: var(--accent-light);
  padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--hairline);
}
@media (max-width: 640px) { .tk-back span { display: none; } }

.tk-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 300;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 14px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 16px; border-radius: var(--r-md);
  background: var(--raised); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-pop);
  font-size: 13.5px; color: var(--text);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.3,1);
}
.tk-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tk-toast button {
  font-size: 13px; font-weight: 700; color: var(--accent-light);
  padding: 2px 2px; white-space: nowrap;
}

@keyframes tk-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.tk-pulse { animation: tk-pulse .32s cubic-bezier(.3,1.4,.5,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}