/* ScrapSwap design system — modern, colorful, still a little playful/geeky.
   Palette inspired by https://coolors.co/9b5de5-f15bb5-fee440-00bbf9-00f5d4
   Vivid hues below are used as BACKGROUNDS (chips, gradients, progress bars)
   paired with dark ink text — contrast-checked. The deepened tokens in
   tailwind.config (rust/teal/mustard/magenta in includes/head.php) are used
   for body-safe colored TEXT and for button fills paired with white text. */

:root {
  --paper: #ffffff;
  --paper2: #f5f2fc;
  --ink: #1b1523;

  /* vivid accents, near-exact to the source palette */
  --violet: #9b5de5;
  --bubblegum: #f15bb5;
  --sunshine: #fee440;
  --sky: #00bbf9;
  --mint: #00f5d4;
}

html, body {
  background-color: var(--paper);
  color: var(--ink);
}

/* soft aurora-style gradient blobs instead of a paper grain texture */
.grain {
  position: relative;
}
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background:
    radial-gradient(480px circle at 8% 0%, var(--violet), transparent 60%),
    radial-gradient(420px circle at 95% 12%, var(--sky), transparent 60%),
    radial-gradient(520px circle at 85% 95%, var(--bubblegum), transparent 60%),
    radial-gradient(380px circle at 5% 90%, var(--mint), transparent 60%);
  filter: blur(10px);
}
.grain > * { position: relative; z-index: 1; }

.font-scrawl { font-family: "Fredoka", sans-serif; font-weight: 600; }

h1, h2, h3, .zine-heading {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Modern floating card: white surface, soft tinted shadow, rounded corners */
.torn-card {
  background: #fffffe;
  border: 1px solid rgba(27, 21, 35, 0.07);
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(27, 21, 35, 0.04), 0 12px 28px -12px rgba(155, 93, 229, 0.28);
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.torn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(27, 21, 35, 0.06), 0 20px 34px -14px rgba(155, 93, 229, 0.38);
}

/* Decorative glow blob accent — replaces the old washi-tape strip */
.washi {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background: radial-gradient(circle, var(--violet), var(--bubblegum) 70%, transparent 75%);
  filter: blur(14px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* Pill-shaped chip/badge */
.sticker {
  display: inline-block;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  color: var(--ink);
  background: var(--sunshine);
  box-shadow: 0 1px 2px rgba(27, 21, 35, 0.08);
}
.sticker.mustard { background: var(--sunshine); }
.sticker.rust { background: var(--bubblegum); }
.sticker.teal { background: var(--mint); }
.sticker.magenta { background: var(--sky); }
.sticker.tilt-r { /* kept as a hook; flat modern look, no rotation */ }

.washi + * .sticker,
.sticker { transform: none; }

/* Pill button, soft colored shadow, gentle lift on hover/press */
.btn-grunge {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  border: none;
  box-shadow: 0 2px 4px rgba(27, 21, 35, 0.06), 0 8px 18px -8px rgba(155, 93, 229, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  display: inline-block;
}
.btn-grunge:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 4px 8px rgba(27, 21, 35, 0.08), 0 14px 24px -10px rgba(155, 93, 229, 0.55); }
.btn-grunge:active { transform: translateY(0); filter: brightness(0.98); box-shadow: 0 1px 2px rgba(27, 21, 35, 0.08); }

/* Progress bar for craft goals — gradient pill fill */
.goal-progress-track {
  background: var(--paper2);
  height: 20px;
  position: relative;
  overflow: hidden;
}
.goal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--bubblegum) 55%, var(--sky));
  border-radius: 9999px;
}

.dashed-divider {
  border-top: 1px solid rgba(27, 21, 35, 0.1);
}

.paper-texture {
  background-color: var(--paper2);
}

textarea, input, select {
  font-family: "Space Grotesk", sans-serif;
}

textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.18);
}