/* CyberPSA — SUNNY variant overrides
   Bright, friendly, warm pastel reskin.
   Loaded after styles.css. */

:root {
  --acid: #ffd84d;        /* sunny gold */
  --ink: #2b1d12;         /* warm cocoa */
  --paper: #fff6ec;       /* soft cream */
  --paper-2: #ffe9d2;     /* peach milk */
  --hot: #ff7a59;         /* warm coral */
  --blue: #6db3ff;        /* powder blue */
  --magenta: #ffaad4;     /* bubblegum */
  --warn: #ffc56b;        /* apricot */
  --ok: #8fd9b6;          /* soft mint */
  --rule: rgba(43,29,18,0.10);
  --shadow: 0 8px 0 rgba(43,29,18,0.10);
}

body {
  background:
    radial-gradient(1000px 600px at 10% -10%, #ffe6c9 0, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #ffd5e1 0, transparent 60%),
    var(--paper);
}

/* Round everything */
.btn {
  border-radius: 999px;
  border-width: 0;
  padding: 14px 22px;
  box-shadow: 0 4px 0 rgba(43,29,18,0.18);
  transition: transform 0.18s, box-shadow 0.18s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(43,29,18,0.22); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(43,29,18,0.18); }
.btn.acid { background: var(--acid); color: var(--ink); }
.btn.ghost { background: rgba(43,29,18,0.06); color: var(--ink); box-shadow: none; }
.btn.ghost:hover { background: rgba(43,29,18,0.10); transform: translateY(-1px); box-shadow: 0 2px 0 rgba(43,29,18,0.10); }
.btn.hot { background: var(--hot); color: var(--paper); }

.tag {
  border-radius: 999px;
  border-width: 0;
  background: rgba(43,29,18,0.06);
  font-weight: 600;
}
.tag.solid { background: var(--ink); color: var(--paper); }
.tag.acid { background: var(--acid); color: var(--ink); }
.tag.hot { background: var(--hot); color: var(--paper); }

.card {
  border-radius: 24px;
  border-width: 0;
  box-shadow: 0 4px 0 rgba(43,29,18,0.10), 0 12px 32px rgba(43,29,18,0.06);
  background: #fffdf9;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 rgba(43,29,18,0.12), 0 20px 40px rgba(43,29,18,0.08);
}

.sticker {
  border-width: 0;
  box-shadow: 0 3px 0 rgba(43,29,18,0.18);
  border-radius: 12px;
  background: var(--acid);
}

.placeholder {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.6) 0, transparent 40%),
    var(--paper-2);
  border: 0;
  border-radius: 18px;
}

input[type="text"], input[type="email"], input[type="password"] {
  border-radius: 999px;
  border-width: 0;
  background: #fffdf9;
  box-shadow: 0 2px 0 rgba(43,29,18,0.10), inset 0 0 0 1px rgba(43,29,18,0.08);
  padding: 14px 20px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  background: #fff;
  box-shadow: 0 4px 0 rgba(43,29,18,0.14), inset 0 0 0 2px var(--ink);
  transform: none;
}

/* Marquee softer */
.marquee {
  background: var(--acid);
  border: 0;
  border-radius: 0;
}
.marquee-track {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 17px;
}

/* Friendly type — Fraunces feels too generic; let's use a softer pairing */
:root {
  --font-display: "Fraunces", "Space Grotesk", Georgia, serif;
  --font-serif: "Fraunces", Georgia, serif;
  --font-body: "Plus Jakarta Sans", "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
}

/* No glitch in friendly mode */
.glitch::before, .glitch::after { display: none; }

/* Softer scanlines */
.scanlines::after { display: none; }

/* Softer halftone */
.halftone {
  background-image: radial-gradient(rgba(43,29,18,0.10) 1px, transparent 1.5px);
  background-size: 8px 8px;
}

/* Buttons in Header — kill the harsh black pills, use warm tones */
header button[style*="var(--ink)"] {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
}