/* =========================================
   Shared App Page Theme Overrides
   Ensures WCAG contrast in both modes
   ========================================= */

/* -----------------------------------------------------------------------------
   Global & U of T System
   ----------------------------------------------------------------------------- */
:root {
  --accent-cyan: #00C2FF;
  --bg-body-general: #0f172a;
}
html.light-mode {
  --accent-cyan: #0077B5;
  --bg-body-uoft: #F8F9FA;
  --text-muted-uoft: #667A95;
}

/* Dark mode: fix contrast on #0f172a background */
html:not(.light-mode) body.app-page nav {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}
html:not(.light-mode) body.app-page nav > div.absolute.inset-0 {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}
html:not(.light-mode) body.app-page nav .text-slate-900,
html:not(.light-mode) body.app-page nav .text-slate-800 { color: #f1f5f9 !important; }
html:not(.light-mode) body.app-page nav .text-slate-500 { color: #94a3b8 !important; }
html:not(.light-mode) body.app-page nav a:hover { color: var(--app-accent, #38bdf8) !important; }

html:not(.light-mode) body.app-page header h1.text-slate-900,
html:not(.light-mode) body.app-page header h1:not([class*="gradient"]),
html:not(.light-mode) body.app-page .text-slate-900:not(.phone-mockup *):not(.window-card *):not(.app-window *) { color: #f1f5f9 !important; }
html:not(.light-mode) body.app-page header .text-slate-500,
html:not(.light-mode) body.app-page section:not([class*="bg-[#0F172A"]) .text-slate-500,
html:not(.light-mode) body.app-page section:not([class*="bg-[#0F172A"]) .text-slate-400 { color: #cbd5e1 !important; }
html:not(.light-mode) body.app-page section.bg-\[\#0F172A\] .text-slate-400,
html:not(.light-mode) body.app-page section[class*="0F172A"] .text-slate-400 { color: #94a3b8 !important; }

/* Section headings and body in feature sections */
html:not(.light-mode) body.app-page h2.text-slate-900,
html:not(.light-mode) body.app-page h3.text-slate-900,
html:not(.light-mode) body.app-page .text-slate-800 { color: #f1f5f9 !important; }

/* Section backgrounds */
html:not(.light-mode) body.app-page section.bg-white\/40,
html:not(.light-mode) body.app-page section.bg-white\/50,
html:not(.light-mode) body.app-page section[class*="bg-white"] {
    background: rgba(30, 41, 59, 0.3) !important;
}
html:not(.light-mode) body.app-page section.border-slate-100 {
    border-color: rgba(148, 163, 184, 0.15) !important;
}

/* Cards, footer */
html:not(.light-mode) body.app-page .glass-panel {
    background: rgba(30, 41, 59, 0.65) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}
html:not(.light-mode) body.app-page footer .text-slate-900,
html:not(.light-mode) body.app-page footer .text-slate-500 { color: #f1f5f9 !important; }
html:not(.light-mode) body.app-page footer { background: rgba(30, 41, 59, 0.5) !important; border-color: rgba(148, 163, 184, 0.15) !important; }

/* Download button - dark mode */
html:not(.light-mode) body.app-page .download-btn {
    background: rgba(56, 189, 248, 0.25) !important;
    color: #e0f2fe !important;
}
html:not(.light-mode) body.app-page .download-btn:hover {
    background: rgba(56, 189, 248, 0.4) !important;
    color: #0f172a !important;
}

/* Dark mode: section light gradient backgrounds → transparent/dark */
html:not(.light-mode) body.app-page section[class*="to-white\/"],
html:not(.light-mode) body.app-page section[class*="from-transparent"][class*="to-white"],
html:not(.light-mode) body.app-page section[class*="to-blue-50"],
html:not(.light-mode) body.app-page section[class*="to-pink-50"],
html:not(.light-mode) body.app-page section[class*="to-violet-50"],
html:not(.light-mode) body.app-page section[class*="from-white"][class*="to-blue"],
html:not(.light-mode) body.app-page section[class*="from-white"][class*="to-pink"],
html:not(.light-mode) body.app-page section[class*="from-white"][class*="to-violet"] {
    background: transparent !important;
}

/* Dark mode: light utility bg → dark tinted (exclude mockup elements) */
html:not(.light-mode) body.app-page .bg-sky-50:not(.app-window *):not(.window-card *) {
    background: rgba(56, 189, 248, 0.1) !important;
}
html:not(.light-mode) body.app-page .bg-sky-100:not(.app-window *):not(.window-card *) {
    background: rgba(56, 189, 248, 0.12) !important;
}
html:not(.light-mode) body.app-page .bg-slate-100:not(.app-window *):not(.window-card *) {
    background: rgba(148, 163, 184, 0.12) !important;
}
html:not(.light-mode) body.app-page .bg-blue-100:not(.app-window *) {
    background: rgba(59, 130, 246, 0.12) !important;
}
html:not(.light-mode) body.app-page .bg-pink-100:not(.app-window *) {
    background: rgba(236, 72, 153, 0.12) !important;
}
html:not(.light-mode) body.app-page .bg-violet-100:not(.app-window *) {
    background: rgba(139, 92, 246, 0.12) !important;
}

/* Dark mode: light borders → subtle dark borders */
html:not(.light-mode) body.app-page .border-sky-100:not(.app-window *) { border-color: rgba(56, 189, 248, 0.2) !important; }
html:not(.light-mode) body.app-page .border-blue-100:not(.app-window *) { border-color: rgba(59, 130, 246, 0.2) !important; }
html:not(.light-mode) body.app-page .border-slate-200:not(.app-window *) { border-color: rgba(148, 163, 184, 0.18) !important; }
html:not(.light-mode) body.app-page .border-slate-100:not(.app-window *) { border-color: rgba(148, 163, 184, 0.12) !important; }
html:not(.light-mode) body.app-page .border-white\/60 { border-color: rgba(148, 163, 184, 0.15) !important; }
html:not(.light-mode) body.app-page .border-white\/20 { border-color: rgba(148, 163, 184, 0.12) !important; }
html:not(.light-mode) body.app-page section.border-slate-200 { border-color: rgba(148, 163, 184, 0.15) !important; }

/* Dark mode: text accent colors – brighter in dark per Apple HIG */
html:not(.light-mode) body.app-page .text-sky-600:not(.app-window *) { color: #7dd3fc !important; }
html:not(.light-mode) body.app-page .text-blue-600:not(.app-window *):not(.phone-mockup *) { color: #93c5fd !important; }
html:not(.light-mode) body.app-page .text-blue-500:not(.app-window *) { color: #60a5fa !important; }
html:not(.light-mode) body.app-page .text-pink-600:not(.app-window *) { color: #f9a8d4 !important; }
html:not(.light-mode) body.app-page .text-pink-500:not(.app-window *) { color: #f472b6 !important; }
html:not(.light-mode) body.app-page .text-violet-600:not(.app-window *):not(.phone-mockup *) { color: #c4b5fd !important; }

/* Dark mode: glass panel hover (elevated surface per Apple HIG) */
html:not(.light-mode) body.app-page .glass-panel:hover {
    background: rgba(30, 41, 59, 0.8) !important;
    transform: translateY(-4px) scale(1.002);
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(148, 163, 184, 0.15) !important;
}

/* Light mode: darken muted text for WCAG */
html.light-mode body.app-page .text-slate-500 { color: #475569 !important; }
html.light-mode body.app-page .text-slate-400 { color: #64748b !important; }
html.light-mode body.app-page nav .text-slate-500 { color: #475569 !important; }