/* tkh-tokens v2.0 — do not edit copies; run scripts/sync-platform.sh */

/* 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 (compact 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: color-mix(in srgb, var(--tkh-accent) 35%, transparent) !important; background: var(--tkh-card-hover) !important; }

/* Universal ProjectCardUni — hover lifts border to accent. */
.tkh-projcard:hover { border-color: color-mix(in srgb, var(--tkh-accent) 35%, transparent) !important; background: var(--tkh-card-hover) !important; }

/* Universal IdeaItem card — hover lifts border to accent. */
.tkh-ideacard:hover { border-color: color-mix(in srgb, var(--tkh-accent) 35%, transparent) !important; background: var(--tkh-card-hover) !important; }

/* Universal EventItem (Calendar agenda + cards) — hover lifts border to accent. */
.tkh-evcard:hover { border-color: color-mix(in srgb, var(--tkh-accent) 35%, transparent) !important; }
/* Universal TriageItem (Inbox) — hover lifts border to accent. */
.tkh-triage:hover { border-color: color-mix(in srgb, var(--tkh-accent) 35%, transparent) !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;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * tokens v2 — the platform scales (TKH-PLATFORM-SPEC.md §2.1 + §7;
 * design-drift.md §4). Everything above this line is v1, byte-for-byte.
 *
 * These fill the vacuum that had every app improvising its own ramps
 * (finance: 22 font sizes + 12 radii; shadows and durations hard-coded in
 * every file). Values are the de-facto ones the best apps already ship —
 * adopting a token below is a visual no-op by construction.
 * ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* per-app accent hook — the shell injects the app's brand onto .tkhs-shell
   * (shell.js manifest.brand → setProperty), which wins over this default.
   * Declared here so non-shell apps (admin, resume, start tiles) have ONE
   * sanctioned place to point their accent plumbing instead of inventing it. */
  --tkh-brand: var(--tkh-accent);

  /* spacing — 4px base, --tkh-space-N = N×4. Matches the fleet's de-facto
   * 8/12/16/20/24px padding clusters. */
  --tkh-space-1: 4px;
  --tkh-space-2: 8px;
  --tkh-space-3: 12px;
  --tkh-space-4: 16px;
  --tkh-space-5: 20px;
  --tkh-space-6: 24px;
  --tkh-space-7: 28px;
  --tkh-space-8: 32px;

  /* type scale — the dense-UI ramp the fleet already converged on
   * (11 / 12.5 / 14 / 16 / 20 / 26 are the most-used sizes on disk today). */
  --tkh-text-xs:   11px;
  --tkh-text-sm:   12.5px;
  --tkh-text-base: 14px;
  --tkh-text-lg:   16px;
  --tkh-text-xl:   20px;
  --tkh-text-2xl:  26px;

  /* shadows — 3 elevations: resting card / floating (toast, popover) /
   * overlay (modal, sheet). Light values here; html.dark deepens them to the
   * exact values cadence + finance already ship. */
  --tkh-shadow-1: 0 2px 10px rgba(0,0,0,0.08);
  --tkh-shadow-2: 0 8px 30px rgba(0,0,0,0.12);
  --tkh-shadow-3: 0 14px 40px rgba(0,0,0,0.18);

  /* motion — micro = hover/press, std = fades/crossfades/toasts, emph =
   * sheets/page transitions/reveals. Spring is for celebrations ONLY
   * (spec §7); animate transform/opacity only. */
  --tkh-dur-micro: 120ms;
  --tkh-dur-std:   200ms;
  --tkh-dur-emph:  320ms;
  --tkh-ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --tkh-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* z-index ladder — the de-facto layer order, named: finance topbar 20,
   * shell mobile toolbar 40, launcher settings modal 50, cadence modal 60 /
   * toast 70 / focus takeover 80 / confetti 90 / queued-toast host 100,
   * finance sync-panel popover 120. Esc closes top-down (spec §3). */
  --tkh-z-header:     20;
  --tkh-z-toolbar:    40;
  --tkh-z-panel:      50;
  --tkh-z-modal:      60;
  --tkh-z-toast:      70;
  --tkh-z-takeover:   80;
  --tkh-z-celebrate:  90;
  --tkh-z-toast-host: 100;
  --tkh-z-popover:    120;
}

html.dark {
  /* shadows read heavier on dark surfaces — these are the literal values the
   * dark-native apps hard-code today (cadence toast 0 8px 30px .4; modal
   * 0 14px 40px .5), so tokenizing them changes nothing on screen. */
  --tkh-shadow-1: 0 2px 10px rgba(0,0,0,0.30);
  --tkh-shadow-2: 0 8px 30px rgba(0,0,0,0.40);
  --tkh-shadow-3: 0 14px 40px rgba(0,0,0,0.50);
}