/* ===========================================================================
 * state.css — semantic state tokens + the state-before/state-after pair
 * Build output of design.md › semantic_state. The narrative is carried by
 * TREATMENT, not by hue. Reusable, swappable state classes are provided so
 * before/after render identically wherever reused.
 * =========================================================================== */
:root {
  /* signal-human — OUTLINED white, high-key, hand-placed (no separate hue) */
  --signal-human-color:  var(--text-hi);
  --signal-human-fill:   transparent;
  --signal-human-border: 1px solid var(--border-strong);

  /* signal-system — blue fill + glow + grid-snapped */
  --signal-system-color:  var(--accent);
  --signal-system-fill:   var(--accent-soft);
  --signal-system-border: 1px solid var(--accent-line);
  --signal-system-glow:   var(--glow-accent);

  /* uncertainty — achromatic, soft, ungridded (before / intuition) */
  --uncertainty-color:   var(--text-mid);
  --uncertainty-filter:  var(--blur-soft);
  --uncertainty-opacity: 0.62; /* @kind other */

  /* signal-future — reserved warm, single opt-in highlight ONLY */
  --signal-future-color: var(--reserve-warm);
}

/* --- Reusable before/after state classes -------------------------------- */
/* BEFORE: blur, low opacity, achromatic, ungridded */
.state-before {
  filter: var(--blur-soft) saturate(0.4);
  opacity: 0.6;
  transform: rotate(-0.6deg);
  border: none;
  transition: filter var(--dur-slow) var(--ease-emphasis),
              opacity var(--dur-slow) var(--ease-emphasis),
              transform var(--dur-slow) var(--ease-emphasis),
              box-shadow var(--dur-slow) var(--ease-emphasis);
}

/* AFTER: sharp 1px border, blue glow, full opacity, grid-aligned */
.state-after {
  filter: none;
  opacity: 1;
  transform: none;
  border: 1px solid var(--accent-line);
  box-shadow: var(--glow-accent);
  transition: filter var(--dur-slow) var(--ease-emphasis),
              opacity var(--dur-slow) var(--ease-emphasis),
              transform var(--dur-slow) var(--ease-emphasis),
              box-shadow var(--dur-slow) var(--ease-emphasis);
}

/* All motion degrades to the instant end-state under reduced-motion / print */
@media (prefers-reduced-motion: reduce) {
  .state-before, .state-after { transition: none; }
}
@media print {
  .state-before { filter: none; opacity: 1; transform: none; }
}