/* /assets/css/theme.css */
/* Theme button look + smooth transitions */

html, body{
  transition: background-color 220ms ease, color 220ms ease, filter 220ms ease;
}

/* header uses .sc-theme-btn as the left button */
.sc-theme-btn{
  width: 40px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 12px 26px rgba(0,0,0,.24);
  transition: transform 140ms ease, box-shadow 160ms ease, border-color 140ms ease, filter 160ms ease;
}

.sc-theme-btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--a2) 22%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--a2) 10%, transparent),
    0 18px 40px rgba(0,0,0,.36);
  filter: saturate(1.06);
}

/* icon */
.sc-theme-btn::before{
  content:"";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--a1) 70%, white), transparent 55%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--a2) 55%, transparent), transparent 60%);
  border: 1px solid color-mix(in srgb, var(--a1) 20%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 10%, transparent);
}

[data-theme="light"] .sc-theme-btn::before{
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--a3) 55%, white), transparent 55%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--a1) 35%, transparent), transparent 60%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--a3) 10%, transparent);
}