/* =========================
   THEME VARIABLES
========================= */

/* DARK (default) */
:root {
  --bg-glass-2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
  --border-hover: rgba(255,255,255,0.25);

  --text-primary: #ffffff;
  --text-muted: #a0a0a0;

  --ig-grad-alt: linear-gradient(135deg, #ff7a18, #ff0069);

  --radius-pill: 999px;

  --t-fast: 0.15s ease;
  --t-med: 0.25s ease;
}

/* LIGHT THEME */
[data-theme="light"] {
  --bg-glass-2: rgba(0,0,0,0.05);
  --border: rgba(0,0,0,0.1);
  --border-hover: rgba(0,0,0,0.25);

  --text-primary: #111111;
  --text-muted: #555555;

  --ig-grad-alt: linear-gradient(135deg, #ff7a18, #ff0069);
}

/* =========================
   THEME TOGGLE COMPONENT
========================= */

.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  background: var(--bg-glass-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--t-fast);
  display: flex;
  align-items: center;
  padding: 3px;
}

.theme-toggle:hover {
  border-color: var(--border-hover);
}

.theme-toggle-thumb {
  width: 20px;
  height: 20px;
  background: var(--ig-grad-alt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: transform var(--t-med);
  transform: translateX(0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Animation */
[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(24px);
}