/* Portfolio light/dark mode support.
   Bridges template Main CSS (style.css) with theme tokens. */

/* ---- Theme Tokens ---- */
:root{--bg:#030b18;--glow:#13365a;--card:#091d35;--text:#f2f7ff;--muted:#afbed2;--accent:#4ed7ff;--border:#2a5078}
:root[data-mode="light"]{--bg:#eef3f8;--glow:#d8ecfb;--card:#ffffff;--text:#12243a;--muted:#53657a;--accent:#007aa8;--border:#c8d8e8}

/* ---- Background and card gradients ---- */
html { min-height:100%; background:var(--bg); }
body { background:var(--bg); color:var(--text); position:relative; isolation:isolate; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 70rem 42rem at 85% 0%, var(--glow) 0%, color-mix(in srgb, var(--glow) 72%, transparent) 28%, transparent 72%); background-repeat:no-repeat; }
html[data-mode="light"] body::before { background:radial-gradient(ellipse 70rem 42rem at 85% 0%, color-mix(in srgb, var(--glow) 55%, #d8ecfb) 0%, rgba(216,236,251,.72) 28%, transparent 72%); }

/* ---- Readable content colors in both modes ---- */
.section-title h2,
.section-title p,
.live-projects .info-card h4 { color:var(--text) !important; }
.live-projects .info-card p { color:var(--muted) !important; }
.live-projects .info-card i,
.live-projects .info-card .info-card-link { color:var(--accent) !important; }

/* ---- Toggle Bar ---- */
.theme-bar { display:flex; justify-content:flex-end; align-items:center; gap:18px; padding:18px 0 26px; }
.theme-control { display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; user-select:none; }
.theme-control input { position:absolute; opacity:0; width:0; height:0; }
.theme-switch { width:52px; height:28px; border-radius:999px; background:var(--border); position:relative; transition:background .2s ease; flex-shrink:0; }
.theme-switch::after { content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; border-radius:50%; background:#fff; transition:transform .16s ease,background .2s ease; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.theme-control input:checked + .theme-switch { background:var(--accent); }
.theme-control input:checked + .theme-switch::after { transform:translateX(24px); }
.theme-control input:focus-visible + .theme-switch { outline:3px solid var(--accent); outline-offset:2px; }

/* ---- Light-mode heading and accent contrast ---- */
html[data-mode="light"] .section-title h2 a { color:var(--accent) !important; }

/* ---- Info card mini (profile sidebar) theme bridge ---- */
.live-projects .info-card,
.live-projects .info-card-mini { background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card) 82%,var(--accent))); border-color:var(--border) !important; }
.live-projects .info-card-mini-text h4 { color:var(--text) !important; }
.live-projects .info-card-mini-text p,
.live-projects .info-card-mini-text .info-card-mini-links { color:var(--muted) !important; }
.live-projects .info-card-mini-text .info-card-mini-links a { color:var(--accent) !important; }
html[data-mode="dark"] .live-projects .info-card-mini img { content:url("../img/profile-img-daark.jpg"); }

/* ---- Responsive ---- */
@media (max-width:760px) { .theme-bar { justify-content:center; } }