/* RetroReps landing explorer — shared tokens & utilities.
   Mirrors apps/retroreps/src/index.css (Tailwind v4 @theme) as plain CSS.
   Tweak knobs arrive as html[data-*] attributes set by tweaks.js. */

:root {
  /* surfaces */
  --surface: #121414;
  --surface-dim: #0c0d0d;
  --surface-bright: #383939;
  --sc-lowest: #0d0e0f;
  --sc-low: #1b1c1c;
  --sc: #1f2020;
  --sc-high: #292a2a;
  --sc-highest: #343535;

  /* primary — arcade gold */
  --gold: #ffd700;
  --gold-soft: #ffe16d;
  --gold-dim: #e9c400;
  --on-gold: #3a3000;
  --primary-ink: #fff6df;

  /* secondary — purple */
  --purple: #5f3780;
  --purple-ink: #e0b6ff;
  --on-purple: #441c65;

  /* tertiary — neon green (CTA) */
  --green: #33fb0a;
  --green-ink: #e1ffd1;
  --on-green: #053900;

  /* danger / poster red */
  --red: #d4232c;
  --danger: #ff4133;

  /* text */
  --ink: #e3e2e2;
  --ink-soft: #d0c6ab;
  --outline: #999077;
  --outline-dim: #4d4732;

  /* fonts */
  --font-headline: "Space Grotesk", sans-serif;
  --font-body: "Work Sans", sans-serif;
  --font-pixel: "Press Start 2P", monospace;

  /* accent — remapped by data-accent */
  --accent: var(--gold);
  --accent-ink: var(--on-gold);
  --accent-soft: var(--gold-soft);

  --bevel: 6px;
  --segw: 7px;
  --gapw: 3px;

  /* density knob */
  --sp: 1;

  /* z scale */
  --z-sticky: 30;
  --z-rail: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* ---------- tweak knobs ---------- */
html[data-accent="green"]  { --accent: var(--green);  --accent-ink: var(--on-green);  --accent-soft: #8dff70; }
html[data-accent="purple"] { --accent: #b678e8;       --accent-ink: #2a1140;          --accent-soft: var(--purple-ink); }
html[data-accent="red"]    { --accent: #ff5348;       --accent-ink: #3c0300;          --accent-soft: #ffb4ab; }

html[data-depth="deep"] { --surface: #0c0d0d; --sc-low: #141515; --sc: #191a1a; --sc-high: #222323; }

html[data-density="compact"] { --sp: 0.72; }

html[data-cursor="crosshair"] body { cursor: crosshair; }

html[data-pixel="easy"] { --font-pixel: "Space Grotesk", sans-serif; }
html[data-pixel="easy"] .px { letter-spacing: -0.01em; font-weight: 700; }

html[data-bevel="off"] { --bevel: 0px; }

html[data-scanlines="off"] .crt-overlay { display: none !important; }
html[data-grain="off"] .grain { display: none !important; }
html[data-stripes="off"] .hazard, html[data-stripes="off"] .hazard-red, html[data-stripes="off"] .hazard-dark { background: var(--sc-high) !important; }

html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
img.pix { image-rendering: pixelated; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; font-family: var(--font-headline); line-height: 1.15; }
p { max-width: 68ch; text-wrap: pretty; }

.px { font-family: var(--font-pixel); line-height: 1.5; }

/* ---------- utilities (mirror app) ---------- */
.crt-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.1) 50%),
              linear-gradient(90deg, rgba(255,0,0,.03), rgba(0,255,0,.01), rgba(0,0,255,.03));
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
}
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hazard      { background: repeating-linear-gradient(45deg, var(--gold) 0 10px, var(--surface) 10px 20px); }
.hazard-dark { background: repeating-linear-gradient(45deg, #292a2a 0 10px, #0d0e0f 10px 20px); }
.hazard-red  { background: repeating-linear-gradient(45deg, #d4232c 0 10px, #181414 10px 20px); }

.hard-shadow    { box-shadow: 4px 4px 0 0 #0e0e0e; }
.hard-shadow-lg { box-shadow: 6px 6px 0 0 #000; }
.active-sink:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #0e0e0e !important; }
.text-shadow { text-shadow: 2px 2px 0 #000; }
.glow-gold  { text-shadow: 0 0 8px rgba(255,215,0,.45), 0 0 2px rgba(255,215,0,.8); }
.glow-green { text-shadow: 0 0 8px rgba(51,251,10,.55), 0 0 2px rgba(51,251,10,.9); }
.glow-accent { text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 2px color-mix(in srgb, var(--accent) 80%, transparent); }

.bevel { clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)), 0 var(--bevel)); }
.frame { padding: 2px; clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)), 0 var(--bevel)); }
.frame > .frame-in { width: 100%; height: 100%; clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)), 0 var(--bevel)); }

/* 8-bit segmented meter */
.seg-track { position: relative; overflow: hidden; background: var(--sc-lowest); }
.seg-chunky { --segw: 14px; --gapw: 4px; }
.seg-chunky-lg { --segw: 18px; --gapw: 5px; }
.seg-track::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 var(--segw), var(--surface) var(--segw) calc(var(--segw) + var(--gapw))); }
.seg-fill { height: 100%; transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* arcade button */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--font-pixel); font-size: clamp(.65rem, 1.4vw, .8rem); line-height: 1;
  padding: calc(1.1rem * var(--sp)) calc(1.6rem * var(--sp));
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 4px 4px 0 0 #0e0e0e;
}
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--sc-highest); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }

@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes pulseglow { 0%,100% { box-shadow: 4px 4px 0 0 #0e0e0e, 0 0 0 rgba(255,215,0,0); } 50% { box-shadow: 4px 4px 0 0 #0e0e0e, 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent); } }
@keyframes pulseglow-soft { 0%,100% { box-shadow: 4px 4px 0 0 #0e0e0e, 0 0 0 rgba(255,215,0,0); } 50% { box-shadow: 4px 4px 0 0 #0e0e0e, 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent); } }
@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.anim-blink { animation: blink 1s steps(1) infinite; }
.anim-pulseglow { animation: pulseglow 2.2s ease-in-out infinite; }
.anim-pulseglow-soft { animation: pulseglow-soft 4.5s ease-in-out infinite; }
.anim-marquee-x { animation: marquee-x var(--marquee-duration, 28s) linear infinite; will-change: transform; }
html[data-marquee="slow"] .anim-marquee-x { --marquee-duration: 84s; }
html[data-marquee="stop"] .anim-marquee-x { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .anim-blink, .anim-pulseglow, .anim-pulseglow-soft, .anim-marquee-x { animation: none !important; }
  .stub-toast { transition: none; }
  html { scroll-behavior: auto; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--sc-highest); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* stub toast (waitlist / stripe stubs) */
.stub-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  z-index: var(--z-toast); opacity: 0; pointer-events: none;
  background: var(--sc-lowest); color: var(--green); font-family: var(--font-pixel); font-size: .6rem;
  padding: 14px 20px; box-shadow: 4px 4px 0 0 #000, inset 0 0 0 2px var(--sc-highest);
  transition: opacity .25s ease-out, transform .25s cubic-bezier(.16,1,.3,1);
}
.stub-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }