/* tokens.css — TKHApp V1 Redesign design tokens.
 *
 * The single source of truth for the redesign's color + type system, ported
 * from the Claude Design handoff (shared.jsx `tkhTokens`). Keyed off the
 * EXISTING `.dark` class toggle (applyThemeMode in index.html) — no new theme
 * attribute, so it rides the battle-tested pre-paint path with zero risk.
 *
 *   :root        → light values (default, when `.dark` is absent)
 *   html.dark    → dark values (dark is the design's primary mode)
 *
 * Redesign code (uni-*.js, shell-*.js, redesign.css) references var(--tkh-*).
 * It does NOT depend on Tailwind — Tailwind stays loaded only for the
 * not-yet-migrated V2 sections during the transition.
 */

:root {
  /* surfaces */
  --tkh-bg:          #fafaf9;
  --tkh-bg-inset:    #f4f3f1;
  --tkh-card:        #ffffff;
  --tkh-card-hover:  #fafaf9;
  --tkh-card-border: #e7e5e4;
  --tkh-divider:     #f5f5f4;
  /* text */
  --tkh-text:        #1c1917;
  --tkh-text-mid:    #44403c;
  --tkh-text-dim:    #78716c;
  --tkh-text-faint:  #a8a29e;
  /* accent + status */
  --tkh-accent:       #4f46e5;
  --tkh-accent-soft:  rgba(79,70,229,0.08);
  --tkh-amber:        #b45309;
  --tkh-amber-soft:   rgba(245,158,11,0.10);
  --tkh-emerald:      #15803d;
  --tkh-emerald-soft: rgba(34,197,94,0.08);
  --tkh-red:          #dc2626;
  --tkh-red-soft:     rgba(220,38,38,0.08);
  --tkh-blue:         #2563eb;
  --tkh-sync:         #22c55e;
  /* brief per-kind tones (constant across themes) */
  --tkh-brief-morning: #f59e0b;
  --tkh-brief-midday:  #60a5fa;
  --tkh-brief-evening: #a78bfa;
  /* type */
  --tkh-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tkh-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  /* shape */
  --tkh-radius:      12px;
  --tkh-radius-lg:   14px;
  --tkh-radius-pill: 999px;
}

/* Narrow viewports (Galaxy Z Fold cover ~344px + normal phones) — keep the task
 * TITLE legible. The red due-date already signals overdue and the amber left-bar
 * signals in-progress, so the OVERDUE text pill (renderTaskRow's + the scrubber's
 * "Nd overdue" badge, both .bg-red-600) is redundant on mobile and steals the
 * title's space. Hide it on collapsed task rows; the title reclaims the room. */
@media (max-width: 639px) {
  [data-expand]:not(.flex-wrap) span.bg-red-600,
  [data-expand]:not(.flex-wrap) [data-overdue-days-badge] { display: none !important; }
}

/* Universal KPITile (buildTile) — hover lifts the border to accent on clickable tiles. */
.tkh-kpitile { transition: border-color .12s, background .12s; }
.tkh-kpitile.cursor-pointer:hover { border-color: rgba(79,70,229,0.35) !important; background: var(--tkh-card-hover) !important; }

/* Universal ProjectCardUni — hover lifts border to accent. */
.tkh-projcard:hover { border-color: rgba(79,70,229,0.35) !important; background: var(--tkh-card-hover) !important; }

/* Universal IdeaItem card — hover lifts border to accent. */
.tkh-ideacard:hover { border-color: rgba(79,70,229,0.35) !important; background: var(--tkh-card-hover) !important; }

/* Universal EventItem (Calendar agenda + cards) — hover lifts border to accent. */
.tkh-evcard:hover { border-color: rgba(79,70,229,0.35) !important; }
/* Universal TriageItem (Inbox) — hover lifts border to accent. */
.tkh-triage:hover { border-color: rgba(79,70,229,0.35) !important; background: var(--tkh-card-hover) !important; }

/* Global search palette (search-modal.js) — row hover + keyboard selection. */
.tkh-search-row { transition: background .1s; }
.tkh-search-row:hover { background: var(--tkh-card-hover); }
.tkh-search-row.is-selected { background: var(--tkh-bg-inset); box-shadow: inset 2px 0 0 var(--tkh-accent); }

/* Alerts tray (notifications-section.js) — read-row hover (unread rows carry
 * their own type-tint, so only read rows get the neutral hover lift). */
.tkh-alert-row { transition: background .12s; }
.tkh-alert-row[data-unread="false"]:hover { background: var(--tkh-card-hover); }

/* Visually-hidden — keeps the search result-count as a screen-reader aria-live
 * region inside the (visual) keyboard-hint footer. */
.tkh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

html.dark {
  /* surfaces */
  --tkh-bg:          #1c1917;
  --tkh-bg-inset:    #0f0d0c;
  --tkh-card:        #0c0a09;
  --tkh-card-hover:  #171513;
  --tkh-card-border: #292524;
  --tkh-divider:     #1c1917;
  /* text */
  --tkh-text:        #fafaf9;
  --tkh-text-mid:    #d6d3d1;
  --tkh-text-dim:    #a8a29e;
  --tkh-text-faint:  #78716c;
  /* accent + status */
  --tkh-accent:       #4f46e5;
  --tkh-accent-soft:  rgba(79,70,229,0.18);
  --tkh-amber:        #fcd34d;
  --tkh-amber-soft:   rgba(245,158,11,0.18);
  --tkh-emerald:      #86efac;
  --tkh-emerald-soft: rgba(34,197,94,0.15);
  --tkh-red:          #f87171;
  --tkh-red-soft:     rgba(248,113,113,0.15);
  --tkh-blue:         #60a5fa;
  --tkh-sync:         #22c55e;
}