/* HSH Design — design tokens. Ported 1:1 from the design handoff (dc.html). */

:root {
  --paper: #f7f7f5;
  --panel: #eeeeea;
  --ink: #1a1a1a;
  --rule: #dcdcd6;
  --lime: #b9d432;
  --muted: #6f6a5c; /* darkened from brand #8a8372 to clear 4.5:1 on --paper */
  --band: #1a1a1a;
  --on-band: #f7f7f5;
  --band-rule: #3d3d38;
  --band-muted: #a39c8b;
  --cut: #e6007e;
}

[data-theme="dark"] {
  --paper: #121211;
  --panel: #1c1c19;
  --ink: #f2f2ec;
  --rule: #34342e;
  --muted: #9d9585;
  --band: #000000;
  --on-band: #f2f2ec;
  --band-rule: #2a2a26;
  --band-muted: #9d9585;
  --cut: #ff2e9a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121211;
    --panel: #1c1c19;
    --ink: #f2f2ec;
    --rule: #34342e;
    --muted: #9d9585;
    --band: #000000;
    --on-band: #f2f2ec;
    --band-rule: #2a2a26;
    --band-muted: #9d9585;
    --cut: #ff2e9a;
  }
}

@keyframes hshDraw { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
@keyframes hshNode { 0%, 55% { opacity: 0; transform: scale(.4); } 70%, 100% { opacity: 1; transform: scale(1); } }
@keyframes hshFade { 0%, 60% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hshPixel { 0%, 45% { opacity: 1; } 75%, 100% { opacity: .12; } }
@keyframes hshMarch { to { stroke-dashoffset: -24; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}