/* Workshop-specific deviation from the vendored neo-retro tokens: louder,
   multi-color accents and a rougher, screen-printed texture (grain overlay,
   halftone dot grid, hard offset shadows, slight sticker tilt on cards).
   Deliberately layered on top of tokens.css/base.css rather than edited into
   them, so the vendored neo-retro files stay untouched and re-copyable. */

:root {
  --w-pink: #ff2e6e;
  --w-lime: #c6f232;
  --w-teal: #00b8ac;
  --w-orange: #ff6a1a;
  --w-purple: #8b5cf6;
  --w-chip-ink: #1a0d10;

  --accent: var(--w-pink);
  --accent-soft: rgba(255, 46, 110, 0.1);
  --accent-line: rgba(255, 46, 110, 0.45);
  --on-accent: var(--w-chip-ink);
}

[data-theme='dark'] {
  --w-pink: #ff5c8a;
  --w-lime: #d8ff5c;
  --w-teal: #35e0d3;
  --w-orange: #ff9152;
  --w-purple: #b18aff;

  --accent: var(--w-pink);
  --accent-soft: rgba(255, 92, 138, 0.12);
  --accent-line: rgba(255, 92, 138, 0.5);
  --on-accent: var(--w-chip-ink);
}

/* Faint halftone dot grid behind everything, plus a fixed film-grain overlay
   for a photocopied/screen-printed feel. Both stay subtle so body text keeps
   full contrast. */
body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--line) 1px, transparent 1.5px);
  background-size: 15px 15px;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme='dark'] body::before {
  opacity: 0.1;
  mix-blend-mode: overlay;
}

/* A stamped, rotated "sticker" for the wordmark accent instead of a plain
   colored word. */
.wordmark .accent {
  display: inline-block;
  color: var(--w-chip-ink);
  background: var(--w-lime);
  padding: 0.02em 0.35em;
  border-radius: 5px;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--ink);
}

header {
  border-bottom: 3px dashed var(--line);
}
footer {
  border-top: 3px dashed var(--line);
}

/* Cards read as cut-and-pasted stickers: hard ink border, flat offset
   shadow instead of a soft blur, cycling accent per position. */
.card {
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--accent);
}
.card.pop {
  box-shadow: 5px 5px 0 var(--w-teal);
}
.card.prompt {
  border: 2px dashed var(--accent-line);
}

.tools > .card:nth-child(3n+1) { --tilt: -0.6deg; }
.tools > .card:nth-child(3n+2) { --tilt: 0.5deg; }
.tools > .card:nth-child(3n+3) { --tilt: -0.4deg; }
.tools > .card {
  transform: rotate(var(--tilt, 0deg));
}

/* Buttons: same pill shape, rougher ink-outlined, hard-shadow "pressable"
   sticker treatment. */
.btn-primary {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--w-teal);
}
.btn-primary:hover {
  opacity: 1;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--w-teal);
}
.btn-primary:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--w-teal);
}
.btn-ghost {
  border: 2px dashed var(--faint-soft);
}
.btn-ghost:hover {
  border-style: solid;
  border-color: var(--ink);
}

.dropzone {
  border: 2px dashed var(--accent-line);
}
.dropzone:hover,
.dropzone.drag-over {
  border-color: var(--ink);
}

.icon-btn {
  border: 2px solid var(--line);
}
.icon-btn:hover {
  border-color: var(--ink);
}

/* Badges: solid loud sticker colors instead of the single accent wash.
   badge-live / badge-soon are opt-in modifiers; plain .badge keeps the
   lime default. */
.badge {
  background: var(--w-lime);
  color: var(--w-chip-ink);
  border: 2px solid var(--ink);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-1.5deg);
}
.badge-live {
  background: var(--w-lime);
}
.badge-soon {
  background: var(--w-orange);
  transform: rotate(1.5deg);
}