/* Inter (SIL Open Font Licence, see /vendor/fonts/Inter-OFL-LICENSE.txt), self-hosted so that no page asks
   Google's servers for fonts (privacy: visitors' IP addresses are not shared with Google). */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/vendor/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/vendor/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/vendor/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'), url('/vendor/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Curiosand – bright ("light") theme.
 *
 * Active when <html data-theme="light"> (the default; set by the inline snippet in every page <head>).
 * Approach: reading surfaces (page, cards, menus, text) become bright, while simulation canvases stay
 * dark "lab screens" – many simulations draw white lines/text directly on the canvas.
 * Everything here is an override layer on top of the Tailwind classes used by the templates, so no
 * template markup had to be rewritten.
 */

:root[data-theme="light"] {
    color-scheme: light;
    --lt-bg: #f6f8fc;
    --lt-card: rgba(255, 255, 255, 0.92);
    --lt-card-solid: #ffffff;
    --lt-line: #dbe3ee;
    --lt-text: #0f172a;
    --lt-text-2: #334155;
    --lt-text-3: #475569;
    --lt-text-4: #64748b;
    --lt-tint: #eef2f7;
    --lt-screen: #0f172a;
}

/* ---------- Page background ---------- */
:root[data-theme="light"] body {
    background:
        radial-gradient(1200px 600px at -10% -10%, rgba(56, 189, 248, 0.16), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(167, 139, 250, 0.16), transparent 60%),
        radial-gradient(900px 600px at 50% 120%, rgba(250, 204, 21, 0.10), transparent 60%),
        var(--lt-bg) !important;
    background-attachment: fixed !important;
    animation: none !important;
    color: var(--lt-text) !important;
}

/* Decorative full-screen canvases: gears/particles drawn in light colours -> invert to soft dark decor */
:root[data-theme="light"] #bg-canvas { filter: invert(1) hue-rotate(180deg); opacity: 0.22; }
:root[data-theme="light"] canvas.fixed { display: none; }

/* Home page: keep the 3D solar system as a dark "window to space" behind the hero only;
   everything below sits on a bright sheet that scrolls over it. */
:root[data-theme="light"] .phs-home #bg-canvas { filter: none; opacity: 1; }
:root[data-theme="light"] .phs-home main > section:not(:first-child),
:root[data-theme="light"] .phs-home #main-footer {
    position: relative;
    background: var(--lt-bg);
    box-shadow: 0 0 0 100vmax var(--lt-bg);
    clip-path: inset(0 -100vmax);
}
:root[data-theme="light"] .phs-home main > section:nth-child(2) { padding-top: 3rem; border-radius: 2rem 2rem 0 0; }
:root[data-theme="light"] .phs-home main > section:first-child,
:root[data-theme="light"] .phs-home main > section:first-child * { color: #f8fafc !important; }
:root[data-theme="light"] .phs-home main > section:first-child .text-gray-300 { color: #cbd5e1 !important; }
:root[data-theme="light"] .phs-home main > section:first-child .phs-btn-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
:root[data-theme="light"] .phs-home main { padding-bottom: 0; }

/* ---------- Cards / glass panels ---------- */
:root[data-theme="light"] .glass-card {
    background: var(--lt-card) !important;
    border: 1px solid var(--lt-line) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}
:root[data-theme="light"] a.glass-card:hover,
:root[data-theme="light"] .simulation-card:hover,
:root[data-theme="light"] .category-card:hover {
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 40px rgba(56, 189, 248, 0.20) !important;
    border-color: #7dd3fc !important;
}
:root[data-theme="light"] :is(.bg-slate-800\/50, .bg-slate-900\/50, .bg-slate-900\/30, .bg-slate-700\/40, .bg-slate-800\/70, .bg-gray-800\/50, .bg-slate-900\/40, .bg-black\/20, .bg-black\/30):not(canvas) {
    background-color: var(--lt-tint) !important;
}
:root[data-theme="light"] :is(.bg-white\/10, .bg-white\/5) { background-color: rgba(15, 23, 42, 0.05) !important; }
:root[data-theme="light"] .bg-white\/20 { background-color: #dbe3ee !important; }
:root[data-theme="light"] :is(.bg-sky-500\/20, .bg-sky-500\/10) { background-color: #e0f2fe !important; }
:root[data-theme="light"] :is(.bg-yellow-500\/20, .bg-yellow-500\/10) { background-color: #fef9c3 !important; }
:root[data-theme="light"] :is(.bg-orange-500\/20, .bg-orange-500\/10) { background-color: #ffedd5 !important; }
:root[data-theme="light"] :is(.bg-teal-500\/20, .bg-teal-500\/10) { background-color: #ccfbf1 !important; }
:root[data-theme="light"] :is(.bg-indigo-500\/20, .bg-indigo-500\/10) { background-color: #e0e7ff !important; }
:root[data-theme="light"] :is(.bg-red-500\/20, .bg-red-600\/20) { background-color: #fee2e2 !important; }
:root[data-theme="light"] :is(.bg-green-500\/20, .bg-green-600\/20) { background-color: #dcfce7 !important; }

/* Borders */
:root[data-theme="light"] :is(.border-white\/10, .border-white\/20, .border-slate-700, .border-slate-600, .border-gray-700, .border-gray-600, .border-slate-200\/10) { border-color: var(--lt-line) !important; }
:root[data-theme="light"] hr { border-color: var(--lt-line) !important; }

/* ---------- Text ---------- */
:root[data-theme="light"] :is(h1, h2, h3, h4, .text-white, .text-gray-100, .text-gray-200) { color: var(--lt-text) !important; text-shadow: none !important; }
:root[data-theme="light"] .text-gray-300 { color: var(--lt-text-2) !important; }
:root[data-theme="light"] :is(.text-gray-400, .text-slate-400) { color: var(--lt-text-3) !important; }
:root[data-theme="light"] :is(.text-gray-500, .text-slate-500) { color: var(--lt-text-4) !important; }
:root[data-theme="light"] .title-glow { animation: none !important; text-shadow: none !important; }
/* Bright accent colours designed for dark backgrounds -> deeper shades with AA contrast on white */
:root[data-theme="light"] :is(.text-sky-300, .text-sky-400, .text-sky-500) { color: #0369a1 !important; }
:root[data-theme="light"] :is(.text-cyan-300, .text-cyan-400) { color: #0e7490 !important; }
:root[data-theme="light"] :is(.text-blue-300, .text-blue-400) { color: #1d4ed8 !important; }
:root[data-theme="light"] :is(.text-amber-300, .text-amber-400, .text-yellow-200, .text-yellow-300, .text-yellow-400) { color: #a16207 !important; }
:root[data-theme="light"] :is(.text-orange-400, .text-orange-500) { color: #c2410c !important; }
:root[data-theme="light"] :is(.text-red-300, .text-red-400, .text-red-500) { color: #dc2626 !important; }
:root[data-theme="light"] :is(.text-green-300, .text-green-400, .text-green-500, .text-emerald-400) { color: #15803d !important; }
:root[data-theme="light"] :is(.text-teal-300, .text-teal-400) { color: #0f766e !important; }
:root[data-theme="light"] :is(.text-indigo-300, .text-indigo-400) { color: #4338ca !important; }
:root[data-theme="light"] :is(.text-violet-300, .text-violet-400, .text-purple-300, .text-purple-400, .text-fuchsia-400) { color: #6d28d9 !important; }
:root[data-theme="light"] :is(.text-pink-200, .text-pink-300, .text-pink-400) { color: #be185d !important; }

/* Keep white text on solid, coloured controls (buttons, badges, active tabs) */
:root[data-theme="light"] :is(button, .btn-primary, .btn-secondary, .btn-start, .btn-pause, .bg-red-500, .bg-green-500, .bg-green-600, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-600, .bg-indigo-700, .bg-sky-500, .bg-sky-600, .phs-btn):is(.text-white, .text-gray-100, .text-gray-200),
:root[data-theme="light"] :is(.btn-primary, .btn-secondary, .btn-start, .btn-pause, .bg-red-500, .bg-green-500, .bg-green-600, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-600, .bg-indigo-700, .phs-btn) :is(.text-white, span, b) { color: #fff !important; }
:root[data-theme="light"] .btn-primary { color: #fff; }

/* Dark solid surfaces (inputs, chips, old panels) -> light */
:root[data-theme="light"] :is(.bg-slate-700, .bg-slate-800, .bg-slate-900, .bg-gray-700, .bg-gray-800, .bg-gray-900, .bg-gray-600):not(button):not(canvas) {
    background-color: var(--lt-tint) !important;
    color: var(--lt-text);
}
:root[data-theme="light"] button:is(.bg-slate-700, .bg-gray-600, .bg-gray-700, .bg-slate-600) { background-color: #e2e8f0 !important; color: var(--lt-text) !important; }
:root[data-theme="light"] .tab-button { color: var(--lt-text-3); }
:root[data-theme="light"] .tab-button.active { color: var(--lt-text); }

/* Form controls */
:root[data-theme="light"] :is(input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea) {
    background-color: #fff !important;
    color: var(--lt-text) !important;
    border-color: #cbd5e1 !important;
}
:root[data-theme="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .5rem center !important; background-size: 1.1em !important; }
:root[data-theme="light"] input[type=range] { background-color: #dbe3ee; }
:root[data-theme="light"] input[type=range]::-webkit-slider-thumb { border-color: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .35); }

/* ---------- Simulation canvases stay dark "lab screens" ---------- */
:root[data-theme="light"] main canvas:not(#bg-canvas) {
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 10px 30px rgba(15, 23, 42, 0.18), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
:root[data-theme="light"] canvas.phs-screen { background-color: var(--lt-screen) !important; }

/* ---------- Header, dropdowns, mobile menu ---------- */
:root[data-theme="light"] #main-header {
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid var(--lt-line) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
}
:root[data-theme="light"] #main-header nav > a,
:root[data-theme="light"] #main-header nav > a span { color: var(--lt-text) !important; }
:root[data-theme="light"] #main-header nav > a svg { color: #0284c7; }
:root[data-theme="light"] .nav-dropdown-btn { color: var(--lt-text-2) !important; }
:root[data-theme="light"] .nav-dropdown-btn:hover { color: var(--lt-text) !important; background: #eef6ff !important; }
:root[data-theme="light"] .nav-dropdown-content.solid-bg { background: #fff !important; border-color: var(--lt-line) !important; box-shadow: 0 16px 40px rgba(15, 23, 42, .14) !important; }
:root[data-theme="light"] .nav-dropdown-content a { color: var(--lt-text-2) !important; }
:root[data-theme="light"] .nav-dropdown-content a:hover { background: #e0f2fe !important; color: #075985 !important; }
:root[data-theme="light"] #mobile-menu { background: #fff !important; }
:root[data-theme="light"] #mobile-menu .accordion-content { background: var(--lt-tint) !important; }
:root[data-theme="light"] #mobile-menu-button { color: var(--lt-text) !important; }
:root[data-theme="light"] #login-btn { background: #0f172a !important; color: #fff !important; }
:root[data-theme="light"] #login-btn:hover { background: #1e293b !important; }
:root[data-theme="light"] #user-dropdown-content { background: #fff !important; }
:root[data-theme="light"] #user-dropdown-content a { color: var(--lt-text-2) !important; }
:root[data-theme="light"] #user-dropdown-content a:hover, :root[data-theme="light"] #user-dropdown-content button:hover { background: var(--lt-tint) !important; }

/* Floating notes/feedback toolkit */
:root[data-theme="light"] #toolkit-modal { background: #fff !important; color: var(--lt-text) !important; border-color: var(--lt-line) !important; }
:root[data-theme="light"] #toolkit-modal .bg-gray-800 { background: var(--lt-tint) !important; color: var(--lt-text) !important; }

/* Footer */
:root[data-theme="light"] footer a:hover { color: #0369a1 !important; }

/* MathJax inherits currentColor – nothing to do. Scrollbars: */
:root[data-theme="light"] * { scrollbar-color: #cbd5e1 transparent; }

/* ---------- Icons ----------
   The app used only four Font Awesome icons, loaded from a CDN as a 6.0.0 *beta* build. They are drawn
   here with Unicode symbols instead (same class names, so existing markup and toggle code still work). */
.fa-solid, .fas { font-style: normal; display: inline-block; line-height: 1; }
.fa-eye::before { content: "👁"; }
.fa-eye-slash::before { content: "🙈"; }
.fa-trash-can::before { content: "🗑"; }
.fa-exclamation-triangle::before { content: "⚠"; }

/* Sign-in pages (login, sign-up, password, OTP) always use their dark space background, so keep their text light in the bright theme too */
:root[data-theme="light"] :is(#loginPageBody, #signupPageBody, #forgotPasswordPageBody, #changePasswordPageBody, #otpVerificationPageBody) :is(h1, h2, h3, h4, .text-white, .text-gray-100, .text-gray-200) { color: #f8fafc !important; }
:root[data-theme="light"] :is(#loginPageBody, #signupPageBody, #forgotPasswordPageBody, #changePasswordPageBody, #otpVerificationPageBody) .text-gray-300 { color: #e2e8f0 !important; }
:root[data-theme="light"] :is(#loginPageBody, #signupPageBody, #forgotPasswordPageBody, #changePasswordPageBody, #otpVerificationPageBody) :is(.text-gray-400, .text-gray-500) { color: #cbd5e1 !important; }

/* Curiosand wordmark: "Curio" in the text colour, "sand" in sand-gold */
.brand-sand { color: #fbbf24; }
:root[data-theme="light"] .brand-sand, :root[data-theme="light"] #main-header .brand-sand { color: #d97706 !important; }
:root[data-theme="light"] :is(#loginPageBody, #signupPageBody, #forgotPasswordPageBody, #changePasswordPageBody, #otpVerificationPageBody) { background-color: #05070d !important; }