/* tokens.css — design tokens + keyframes, ported verbatim from the FX design
   shell ("Denali Hang-Tag Grader v2 - FX.html"). Values must not drift: the
   design is the spec. */

:root {
  /* Tweak defaults, baked in (design TWEAK_DEFAULTS) */
  --ht-accent: #d8542f;
  --ht-accent-soft: #d8542f1f; /* accent + 1f alpha, as computed by themeVars() */

  /* Palette (hangtag-fx.jsx) */
  --ht-cream: #F5EFDF;
  --ht-tagpaper: #fffaf0;
  --ht-ink: #3a2c22;
  --ht-soft-shadow: 0 6px 14px rgba(120, 80, 40, 0.18);

  /* Verdict colors (ui.jsx VERDICT_COLORS) */
  --v-resell-fg: #0f7a55;   --v-resell-bg: #d8f3e6;   --v-resell-deep: #0b5e41;
  --v-discount-fg: #bd7710; --v-discount-bg: #fceccf; --v-discount-deep: #8a560a;
  --v-reject-fg: #c33b25;   --v-reject-bg: #fbe0d9;   --v-reject-deep: #8f2817;

  /* Check-state colors (ui.jsx stateColor) */
  --s-pass-fg: #1b8f6b; --s-pass-bg: #e3f5ec; --s-pass-ring: #9bdcc1;
  --s-warn-fg: #b9761a; --s-warn-bg: #fdefd6; --s-warn-ring: #f1cf8e;
  --s-fail-fg: #c0432e; --s-fail-bg: #fbe4de; --s-fail-ring: #eeb0a2;
  --s-info-fg: #4a5d8a; --s-info-bg: #e9eefb; --s-info-ring: #bcc9ee;

  /* Processing pace — "snappy" preset (PACE.snappy = 320ms per step) */
  --ht-pace-ms: 320;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #efeae0; }
body { font-family: Nunito, sans-serif; }
button { font-family: inherit; }
svg { display: block; }

/* ---- keyframes (verbatim from the FX shell) ---- */
@keyframes tg-spin { to { transform: rotate(360deg); } }
@keyframes tg-scanbeam {
  0% { top: 6%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 94%; opacity: 0; }
}
/* tag drops in from the string with a little overshoot, settling to --rot */
@keyframes tg-tagdrop {
  0%   { opacity: 0; transform: translateY(-30px) rotate(calc(var(--rot, -3deg) - 4deg)); }
  55%  { opacity: 1; transform: translateY(5px)  rotate(calc(var(--rot, -3deg) + 3deg)); }
  78%  { transform: translateY(-2px) rotate(calc(var(--rot, -3deg) - 1.5deg)); }
  100% { opacity: 1; transform: translateY(0)   rotate(var(--rot, -3deg)); }
}
.ht-checkin { animation: tg-checkin 0.4s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes tg-checkin {
  from { opacity: 0; transform: translateX(-7px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ht-bob { animation: tg-bob 2.6s ease-in-out infinite; }
@keyframes tg-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* flow-arrow marching dashes (dash 2 + gap 8 = 10 → seamless loop) */
@keyframes tg-dashflow { to { stroke-dashoffset: -10; } }
/* wallpaper glyphs — very gentle vertical drift */
@keyframes tg-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* wallpaper gestures — mostly at rest, a brief moment of play per loop */
@keyframes tg-wave {
  0%, 78%, 96%, 100% { transform: rotate(0deg); }
  82% { transform: rotate(11deg); }
  86% { transform: rotate(-8deg); }
  90% { transform: rotate(11deg); }
}
@keyframes tg-hop {
  0%, 80%, 94%, 100% { transform: translateY(0); }
  84% { transform: translateY(-9px); }
  88% { transform: translateY(0); }
  91% { transform: translateY(-4px); }
}
@keyframes tg-wiggle {
  0%, 85%, 99%, 100% { transform: rotate(0deg); }
  89% { transform: rotate(-7deg); }
  93% { transform: rotate(7deg); }
  96% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .ht-dashflow { animation: tg-dashflow 0.7s linear infinite; }
  .ht-drift { animation-name: tg-drift; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .ht-wave { animation-name: tg-wave; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .ht-hop { animation-name: tg-hop; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .ht-wiggle { animation-name: tg-wiggle; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-bob { animation: none; }
}