/* Shared theme styles: light-theme overrides for the Tailwind utility classes used on the site, plus toasts. */

body { transition: background-color .25s ease, color .25s ease; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ---------- Light theme ---------- */
html[data-theme="light"] .glass-header { background: rgba(255, 255, 255, 0.85); }

/* backgrounds */
html[data-theme="light"] .bg-slate-950 { background-color: #f1f5f9; }
html[data-theme="light"] .bg-slate-900 { background-color: #ffffff; }
html[data-theme="light"] .bg-slate-900\/40 { background-color: rgba(255, 255, 255, 0.6); }
html[data-theme="light"] .bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.75); }
html[data-theme="light"] .bg-slate-800 { background-color: #e2e8f0; }
html[data-theme="light"] .bg-slate-800\/80 { background-color: rgba(226, 232, 240, 0.9); }
html[data-theme="light"] .bg-slate-950\/80 { background-color: rgba(15, 23, 42, 0.45); }
html[data-theme="light"] .hover\:bg-slate-800:hover { background-color: #e2e8f0; }
html[data-theme="light"] .hover\:bg-slate-700:hover { background-color: #cbd5e1; }
html[data-theme="light"] .hover\:bg-blue-600\/20:hover { background-color: rgba(37, 99, 235, 0.12); }
html[data-theme="light"] body.bg-slate-950 { background-color: #f8fafc; }
html[data-theme="light"] .bg-slate-950.border-t { background-color: #ffffff; } /* footers */

/* borders */
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-900 { border-color: #e2e8f0; }
html[data-theme="light"] .border-slate-700 { border-color: #cbd5e1; }
html[data-theme="light"] .border-slate-800\/80 { border-color: #e2e8f0; }

/* text (white text on coloured/gradient backgrounds is left alone) */
html[data-theme="light"] .text-white:not([class*="bg-blue"]):not([class*="bg-gradient"]):not([class*="bg-emerald"]):not([class*="bg-indigo"]) { color: #0f172a; }
html[data-theme="light"] .text-slate-100 { color: #0f172a; }
html[data-theme="light"] .text-slate-200 { color: #1e293b; }
html[data-theme="light"] .text-slate-300 { color: #334155; }
html[data-theme="light"] .text-slate-400 { color: #475569; }
html[data-theme="light"] .text-slate-500 { color: #64748b; }
html[data-theme="light"] .text-blue-400 { color: #2563eb; }
html[data-theme="light"] .text-emerald-400 { color: #059669; }
html[data-theme="light"] .text-indigo-400 { color: #4f46e5; }
html[data-theme="light"] .text-orange-400 { color: #ea580c; }
html[data-theme="light"] .hover\:text-blue-400:hover,
html[data-theme="light"] .hover\:text-blue-300:hover { color: #1d4ed8; }
html[data-theme="light"] .hover\:text-white:hover { color: #0f172a; }
html[data-theme="light"] .placeholder-slate-500::placeholder { color: #94a3b8; }
html[data-theme="light"] ::selection { background: #2563eb; color: #fff; }

/* gradient text in the logo (white -> slate -> blue) */
html[data-theme="light"] .from-white {
    --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"] .via-slate-200 {
    --tw-gradient-stops: var(--tw-gradient-from), #334155 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* softer glow and shadows in light mode */
html[data-theme="light"] .hero-glow { background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.14) 0%, rgba(248, 250, 252, 0) 70%); }
html[data-theme="light"] .shadow-2xl { box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.15); }

/* ---------- Toasts ---------- */
#toast-stack {
    position: fixed; right: 16px; bottom: 16px; z-index: 100;
    display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
    pointer-events: none; max-width: calc(100vw - 32px);
}
.toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 16px; font-size: 14px; font-weight: 500;
    color: #e2e8f0; background: #1e293b; border: 1px solid #334155;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5);
    opacity: 0; transform: translateY(12px) scale(.98);
    transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-success i { color: #34d399; }
.toast-error i { color: #f87171; }
.toast-info i { color: #60a5fa; }
.toast-action {
    margin-left: 4px; padding: 4px 10px; border-radius: 10px;
    background: #2563eb; color: #fff; font-size: 12px; font-weight: 700;
}
.toast-action:hover { background: #3b82f6; }
.toast-close { color: #94a3b8; font-size: 18px; line-height: 1; padding: 0 2px; }
.toast-close:hover { color: #fff; }
html[data-theme="light"] .toast { color: #0f172a; background: #ffffff; border-color: #e2e8f0; box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.25); }
html[data-theme="light"] .toast-close { color: #64748b; }
html[data-theme="light"] .toast-close:hover { color: #0f172a; }
html[data-theme="light"] .toast-success i { color: #059669; }
html[data-theme="light"] .toast-error i { color: #dc2626; }
html[data-theme="light"] .toast-info i { color: #2563eb; }

@media (prefers-reduced-motion: reduce) {
    .toast, body { transition: none; }
}

/* ---------- Scroll reveal ---------- */
/* Only hide elements when JS is running (theme.js adds .js to <html>), so content never stays invisible. */
html.js .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--rd, 0ms);
}
html.js .reveal[data-reveal="left"] { transform: translateX(-32px); }
html.js .reveal[data-reveal="right"] { transform: translateX(32px); }
html.js .reveal[data-reveal="zoom"] { transform: scale(.94); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Keep white text on the always-coloured promo banner in light mode */
html[data-theme="light"] .promo-banner .text-white { color: #ffffff !important; }

html[data-theme="light"] .text-slate-600 { color: #cbd5e1; }


/* ---------- Developer credit: hover / focus / tap card ---------- */
.dev-credit { margin-top: 8px; font-size: 13px; }
.dev-pop { position: relative; display: inline-block; }
.dev-name { color: #60a5fa; font-weight: 700; border-bottom: 1px dashed currentColor; }
.dev-card {
    position: absolute; bottom: calc(100% + 12px); left: 50%; width: 280px; max-width: calc(100vw - 32px);
    transform: translate(-50%, 8px); background: #0f172a; border: 1px solid #334155; border-radius: 16px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6); padding: 16px; text-align: left; font-size: 13px;
    display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s; z-index: 50;
}
.dev-card::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; } /* hover bridge */
.dev-pop:hover .dev-card, .dev-pop:focus-within .dev-card, .dev-pop.open .dev-card { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid #334155; }
.dev-head img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: #fff; padding: 4px; }
.dev-head b { display: block; color: #f1f5f9; font-size: 15px; }
.dev-head small { color: #94a3b8; font-size: 12px; line-height: 1.3; display: block; }
.dev-card a, .dev-loc { display: block; padding: 4px 0; color: #94a3b8; }
.dev-card a:hover { color: #60a5fa; }
.dev-card i { width: 16px; text-align: center; margin-right: 4px; color: #60a5fa; }
.dev-card a.dev-btn { margin-top: 8px; text-align: center; background: #2563eb; color: #fff; border-radius: 30px; padding: 8px; font-weight: 700; }
.dev-card a.dev-btn:hover { color: #fff; opacity: .9; }
html[data-theme="light"] .dev-name { color: #2563eb; }
html[data-theme="light"] .dev-card { background: #fff; border-color: #cbd5e1; box-shadow: 0 20px 40px -12px rgba(15, 23, 42, .25); }
html[data-theme="light"] .dev-head { border-color: #e2e8f0; }
html[data-theme="light"] .dev-head b { color: #0f172a; }
html[data-theme="light"] .dev-head small, html[data-theme="light"] .dev-card a, html[data-theme="light"] .dev-loc { color: #475569; }
html[data-theme="light"] .dev-card a:hover, html[data-theme="light"] .dev-card i { color: #2563eb; }
html[data-theme="light"] .dev-card a.dev-btn { color: #fff; }