/* ============================================================================
   TTM theme layer for Maps of Making — token consumers only.
   Every value here is var(--ttm-*) from tokens.css (spec rule: never hardcoded
   hex), so the admin theme customizer and the terminal theme cascade through
   automatically. Skins the CHROME ONLY: the lifecycle pin colors are semantic
   (green=alive, red=broken, cobalt=confirmed) and are not touched.

   html[data-ttm-theme="ttm"|"terminal"] → TTM look via the MoM chrome vars.
   No attribute → upstream zine look, completely untouched.
   ========================================================================== */

html[data-ttm-theme] {
  --paper: var(--ttm-bg);
  --paper-2: var(--ttm-bg-alt);
  --ink: var(--ttm-text);
  --ink-soft: var(--ttm-text-secondary);
  --muted: var(--ttm-text-muted);
  --faint: var(--ttm-text-faint);
  --rule: var(--ttm-border);
  --accent: var(--ttm-danger);
  --accent-2: var(--ttm-info);
  --green: var(--ttm-lime);
  --yellow: var(--ttm-warning);
  --shadow: var(--ttm-shadow);
  --drawer-bg: var(--ttm-surface);
  --status-bg: var(--ttm-surface-alt);
  --radius: var(--radius-md);
}

/* Brand wordmark */
html[data-ttm-theme] .brand .logo {
  font-family: var(--ttm-font-serif);
}
html[data-ttm-theme="ttm"] .brand .logo {
  background: linear-gradient(90deg,
    var(--ttm-cyan), var(--ttm-hot-red), var(--ttm-pink),
    var(--ttm-lime), var(--ttm-goldenrod));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-ttm-theme="terminal"] body { font-family: var(--ttm-font-mono); }

/* Focus + selection per spec */
html[data-ttm-theme] :focus-visible {
  outline: 2px solid var(--ttm-focus) !important;
  outline-offset: 2px;
}
html[data-ttm-theme] ::selection {
  background: var(--ttm-control);
  color: var(--ttm-on-accent);
}