/* Theme switch – GeneratePress + Bootstrap 5.3 */

/* Variables */
:root{
  --bg:#ffffff;
  --bg-soft:#f7f7fb;
  --bg-anime-info:#eeeef3;
  --text:#0f172a;
  --home-text-title: linear-gradient(to right, #006859, #022e58);  
  --muted:#6b7280;
  --treding-muted:#ff0505;
  --line:#e5e7eb;
  --brand:#0ea5e9;
  --text-related-img: #1e5841;

  --ep-badge-bg1:#4f46e5;   
  --ep-badge-bg2:#0ea5e9;
  --ep-badge-text:#e5e7eb;
  /* Bridge to GeneratePress vars */
  --base-2:var(--bg);
  --base-3:var(--bg-soft);
  --contrast:var(--text);
  --accent:var(--brand);

  /* Toggle colors */
  --toggle-start:#4f46e5;
  --toggle-end:#0ea5e9;
  --shadow:rgba(2,132,199,.35);
}

/* Dark variables */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220;
  --bg-soft:#111a2b;
  --bg-anime-info:#111a2b;
  --text:#e5e7eb;
  --text-related-img:#dfee05;
  --home-text-title: linear-gradient(90deg, #41ff00, #fffe00);
  --muted:#9ca3af;
  --treding-muted:#f3f909; 
  --line:#223148;
  --brand:#38bdf8;

  --toggle-start:#0ea5e9;
  --toggle-end:#22d3ee;
  --shadow:rgba(56,189,248,.35);
}

/* Base */
html,body{
  background-color:var(--bg);
  color:var(--text);
}

.separate-containers .inside-article,
.widget,
.card,
.topic-row,
.topic-head,
.topic-content,
.completed-header,
.section-heading-wrapper,
.bixbox,
.gp-widget-area,
.site-footer,
.site-header,
.main-navigation{
  background:var(--base-2);
  color:var(--text);
  border-color:var(--line);
}

hr,.wp-block-separator{ border-color:var(--line); }

a{ color:var(--brand); text-decoration-thickness:.06em; }
a:hover{ color:color-mix(in srgb, var(--brand) 85%, #000 15%); }

.widget-title,.section-title,.latest-release-title{ color:var(--text); }

input[type="text"],input[type="search"],input[type="email"],
select,textarea{
  background-color:var(--base-2);
  color:var(--text);
  border:1px solid var(--line);
}
input::placeholder,textarea::placeholder{ color:var(--muted); }

html[data-theme="dark"] .sidebar .widget{ background:var(--bg-soft); }
html[data-theme="dark"] .widget-title{ border-color:var(--line); }

/* Toggle button (.theme-toggle and alias .agn-theme-toggle) */
.theme-toggle,
.agn-theme-toggle{
  --size:36px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--size);
  height:var(--size);
  margin-left:.5rem;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:linear-gradient(135deg,var(--toggle-start),var(--toggle-end));
  color:#fff;
  box-shadow:0 8px 20px var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
.theme-toggle:hover,
.agn-theme-toggle:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 10px 26px var(--shadow);
}
.theme-toggle:focus-visible,
.agn-theme-toggle:focus-visible{
  outline:2px solid color-mix(in srgb, var(--brand) 70%, #fff 30%);
  outline-offset:2px;
}

@media (min-width:768px){
  .theme-toggle,.agn-theme-toggle{ --size:38px; }
}
@media (prefers-reduced-motion:reduce){
  .theme-toggle,.agn-theme-toggle{ transition:none; }
}

/* Layout in user widget */
.user-system-widget{ display:flex; align-items:center; gap:12px; }
.user-system-widget .theme-toggle,
.user-system-widget .agn-theme-toggle{ margin-left:4px; }

/* Always-visible icon for the toggle (SVG inside is hidden; use ::before) */
.theme-toggle svg,
.agn-theme-toggle svg{ display:none !important; }

/* Disable the ::before fallback (avoid conflicts) */
.theme-toggle::before,
.agn-theme-toggle::before{ content:none !important; display:none !important; }

/* Set icon per theme */
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .agn-theme-toggle{
  --icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.8 1.42-1.42zM1 13h3v-2H1v2zm10-9h2V1h-2v3zm7.04.46l1.79-1.8-1.41-1.41-1.8 1.79 1.42 1.42zM17 13h3v-2h-3v2zm-5 8h2v-3h-2v3zm-7.04-.46l1.8 1.79 1.41-1.41-1.79-1.8-1.42 1.42zM4 17H1v-2h3v2zm16.24 1.76l-1.8-1.79-1.41 1.41 1.79 1.8 1.42-1.42zM12 8a4 4 0 100 8 4 4 0 000-8z'/></svg>");
}
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .agn-theme-toggle{
  --icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/></svg>");
}

/* Draw icon on TOP of gradient */
.theme-toggle,
.agn-theme-toggle{
  background-image:
    var(--icon),                                   /* top */
    linear-gradient(135deg,var(--toggle-start),var(--toggle-end)); /* bottom */
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:18px 18px,100% 100%;
}