Vibe Dark — Renk Paleti

<div class="palette">
  <div class="swatch" style="background:#0a0a14"><span>Background</span><code>#0a0a14</code></div>
  <div class="swatch" style="background:#13131d"><span>Surface</span><code>#13131d</code></div>
  <div class="swatch" style="background:#a78bfa"><span>Primary</span><code>#a78bfa</code></div>
  <div class="swatch" style="background:#7c3aed"><span>Primary Deep</span><code>#7c3aed</code></div>
  <div class="swatch" style="background:#22d3ee"><span>Accent</span><code>#22d3ee</code></div>
  <div class="swatch" style="background:#ec4899"><span>Highlight</span><code>#ec4899</code></div>
  <div class="swatch" style="background:#22c55e"><span>Success</span><code>#22c55e</code></div>
  <div class="swatch" style="background:#f87171"><span>Danger</span><code>#f87171</code></div>
</div>

.palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  font-family: system-ui, sans-serif;
  color: #fff;
}
.swatch {
  height: 110px;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.swatch span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  mix-blend-mode: difference;
}
.swatch code {
  display: block;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 4px;
  opacity: 0.85;
  mix-blend-mode: difference;
}

/* Tailwind CSS variables eklemek için */
@layer base {
  :root {
    --bg-base: #0a0a14;
    --bg-surface: #13131d;
    --primary: #a78bfa;
    --primary-deep: #7c3aed;
    --accent: #22d3ee;
    --highlight: #ec4899;
    --success: #22c55e;
    --danger: #f87171;
  }
}