/* ============================================================
   Wilan Studio — Cyber Neobrutalism 2.0 Stylesheet
   ============================================================ */

:root {
  --bg-canvas: #FAFAF6;
  --ink-black: #0F1117;
  --card-white: #FFFFFF;
  --card-secondary: #F1F1EB;
  --accent-red: #FF3366;
  --accent-violet: #8B5CF6;
  --accent-lime: #CCFF00;
  --accent-cyan: #00D8FF;
  --accent-yellow: #FFB800;
  --muted-text: #5A6072;
  
  --shadow-main: 4px 4px 0px #0F1117;
  --shadow-hover: 6px 6px 0px #0F1117;
  --shadow-active: 1px 1px 0px #0F1117;
  --shadow-pop-red: 4px 4px 0px #FF3366;
  --shadow-pop-lime: 4px 4px 0px #CCFF00;
  --shadow-pop-cyan: 4px 4px 0px #00D8FF;
  
  --font-display: "Archivo", "Archivo Black", sans-serif;
  --font-sans: "Space Grotesk", "Prompt", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

html.dark {
  --bg-canvas: #0D0E15;
  --ink-black: #F4F4F8;
  --card-white: #151722;
  --card-secondary: #1F2232;
  --muted-text: #949AB0;
  --shadow-main: 4px 4px 0px #F4F4F8;
  --shadow-hover: 6px 6px 0px #F4F4F8;
  --shadow-active: 1px 1px 0px #F4F4F8;
}

* { box-sizing: border-box; }

body {
  background-color: var(--bg-canvas);
  color: var(--ink-black);
  font-family: var(--font-sans);
  transition: background-color 0.2s, color 0.2s;
  background-image: radial-gradient(rgba(0,0,0,0.07) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}
html.dark body {
  background-image: radial-gradient(rgba(255,255,255,0.07) 1.5px, transparent 1.5px);
}

.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

/* Cyber Neobrutalist Cards */
.cyber-card {
  background: var(--card-white);
  border: 2.5px solid var(--ink-black);
  border-radius: 14px;
  box-shadow: var(--shadow-main);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cyber-card-hover:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover);
}
.cyber-card-hover:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-active);
}

/* Tactile Cyber Buttons */
.cyber-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--card-white);
  color: var(--ink-black);
  border: 2.5px solid var(--ink-black);
  border-radius: 12px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-main);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.cyber-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover);
}
.cyber-btn:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-active);
}

.cyber-btn-red {
  background: var(--accent-red);
  color: #FFFFFF;
}
.cyber-btn-black {
  background: var(--ink-black);
  color: var(--bg-canvas);
  box-shadow: var(--shadow-pop-red);
}
.cyber-btn-lime {
  background: var(--accent-lime);
  color: #0F1117;
}
.cyber-btn-cyan {
  background: var(--accent-cyan);
  color: #0F1117;
}

/* Cyber Sticker Tags */
.cyber-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 2px solid var(--ink-black);
  border-radius: 8px;
  padding: 2px 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--card-secondary);
  box-shadow: 2px 2px 0px var(--ink-black);
}
.cyber-tag-red { background: var(--accent-red); color: #fff; }
.cyber-tag-lime { background: var(--accent-lime); color: #0F1117; }
.cyber-tag-cyan { background: var(--accent-cyan); color: #0F1117; }
.cyber-tag-violet { background: var(--accent-violet); color: #fff; }

/* Cyber Inputs & Selects */
.cyber-input {
  width: 100%;
  background: var(--bg-canvas);
  color: var(--ink-black);
  border: 2.5px solid var(--ink-black);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: 3px 3px 0px var(--ink-black);
  outline: none;
  transition: all 0.15s ease;
}
.cyber-input:focus {
  box-shadow: 4px 4px 0px var(--accent-red);
  border-color: var(--accent-red);
}

/* Marquee Track */
@keyframes nb-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: nb-marquee 24s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}