/* ==========================================================================
   Theme Variables & Color Vibes
   ========================================================================== */
:root[data-vibe="espresso"] {
  --bg: #2C1A14;
  --btn-bg: #FFFDDF;
  --btn-text: #2C1A14;
  --outline: #FFFDDF;
  --shadow: #DE5A00;
  --hover-bg: #FFCC6F;
  --vibe-bg: #DE5A00;
  --vibe-text: #FFFDDF;
}

:root[data-vibe="cream"] {
  --bg: #FFFDDF;
  --btn-bg: #FFFFFF;
  --btn-text: #2C1A14;
  --outline: #2C1A14;
  --shadow: #2C1A14;
  --hover-bg: #FFCC6F;
  --vibe-bg: #FFCC6F;
  --vibe-text: #2C1A14;
}

:root[data-vibe="kraft"] {
  --bg: #D4A373;
  --btn-bg: #FFFDDF;
  --btn-text: #2C1A14;
  --outline: #2C1A14;
  --shadow: #2C1A14;
  --hover-bg: #DE5A00;
  --vibe-bg: #2C1A14;
  --vibe-text: #FFFDDF;
}

:root[data-vibe="orange"] {
  --bg: #DE5A00;
  --btn-bg: #2C1A14;
  --btn-text: #FFFDDF;
  --outline: #FFFDDF;
  --shadow: #FFCC6F;
  --hover-bg: #B07D4C;
  --vibe-bg: #FFFDDF;
  --vibe-text: #2C1A14;
}

/* ==========================================================================
   Base Styles & Neo-Brutalist Interactivity
   ========================================================================== */
body {
  background-color: var(--bg);
  font-family: 'Space Grotesk', sans-serif;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-x: hidden;
}

.social-btn {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: 3px solid var(--outline);
  box-shadow: 5px 5px 0px var(--shadow);
  transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.14s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.15s ease,
              color 0.15s ease;
}

.social-btn:hover {
  background-color: var(--hover-bg);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px var(--shadow);
}

:root[data-vibe="kraft"] .social-btn:hover {
  color: #FFFDDF;
}

.social-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0px var(--shadow);
}

.vibe-btn {
  background-color: var(--vibe-bg);
  color: var(--vibe-text);
  border: 3px solid var(--outline);
  box-shadow: 4px 4px 0px var(--shadow);
  transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.14s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.2s ease,
              color 0.2s ease;
}

.vibe-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--shadow);
}

.vibe-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0px var(--shadow);
}