/* Shared Breaking Watch theme layer
 * Phase 1 extraction: preserve existing behavior exactly.
 * Dark theme visuals must remain unchanged.
 */

.light-mode {
    --bg-body: #f7f3ee;
    --color-base: #f7f3ee;
    --bg-card: #fffdfa;
    --color-surface: #fffdfa;
    --bg-card-soft: #f3ece4;
    --color-surface-alt: #f3ece4;
    --text-primary: #16110d;
    --color-text-primary: #16110d;
    --color-text-heading: #16110d;
    --text-secondary: #433a33;
    --text-muted: #7a6f67;
    --color-text-muted: #7a6f67;
    --border-color: #e6dbcf;
    --color-border: #e6dbcf;
    --bg-action: #f3ece4;
    --public-page-bg: #f7f3ee;
    --public-surface: #fffdfa;
    --public-surface-soft: #f3ece4;
    color-scheme: light;
}

:root:not(.light-mode) {
    color-scheme: dark;
}

.light-mode .text-white,
.light-mode .text-slate-100,
.light-mode .text-[#f0ede8],
.light-mode .text-[#ffffff] {
    color: #111111 !important;
}

.light-mode .text-slate-300,
.light-mode .text-slate-400,
.light-mode .text-[#8a8480],
.light-mode .text-[#f0ede8]\/90,
.light-mode .text-[#f0ede8]\/80,
.light-mode .text-[#f0ede8]\/70 {
    color: #2f2f2f !important;
}

.light-mode .bg-[#0d0c0b],
.light-mode .bg-slate-950,
.light-mode body {
    background-color: var(--public-page-bg, #fcfbf9) !important;
}

.light-mode .bg-[#1a1917],
.light-mode .bg-[#151311],
.light-mode .bg-[#1f1a14],
.light-mode .bg-[#242220],
.light-mode .bg-[#2a2826],
.light-mode .bg-[#2e2c2a],
.light-mode .bg-[#3e3c3a],
.light-mode .bg-slate-900,
.light-mode .bg-slate-900\/60,
.light-mode .bg-slate-900\/70,
.light-mode .bg-slate-900\/80,
.light-mode .bg-slate-950\/45,
.light-mode .bg-slate-950\/65,
.light-mode .bg-white\/5,
.light-mode .bg-white\/10,
.light-mode .bg-white\/80,
.light-mode .bg-white\/\[0\.03\],
.light-mode .bg-white\/\[0\.05\],
.light-mode [style*="background: #1a1917"],
.light-mode [style*="background:#1a1917"],
.light-mode [style*="background-color: #1a1917"],
.light-mode [style*="background-color:#1a1917"],
.light-mode [style*="background: #0d0c0b"],
.light-mode [style*="background:#0d0c0b"],
.light-mode [style*="background-color: #0d0c0b"],
.light-mode [style*="background-color:#0d0c0b"] {
    background-color: var(--public-surface, #fcfbf9) !important;
    background: var(--public-surface, #fcfbf9) !important;
}

.light-mode [style*="border: 1px solid #2e2c2a"],
.light-mode [style*="border:1px solid #2e2c2a"],
.light-mode [style*="border-color: #2e2c2a"],
.light-mode [style*="border-color:#2e2c2a"] {
    border-color: var(--color-border, #e8dfd4) !important;
}

.light-mode .border-[#2e2c2a],
.light-mode .border-white\/10,
.light-mode .border-white\/15,
.light-mode .border-white\/20 {
    border-color: var(--color-border, #e8dfd4) !important;
}

.light-mode .shadow-glow {
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.04), 0 16px 40px rgba(17, 17, 17, 0.06) !important;
}

.light-mode [class*="bg-[radial-gradient"],
.light-mode [class*="linear-gradient(to_bottom"],
.light-mode [class*="bg-cyan-500/10"],
.light-mode [class*="bg-indigo-500/10"],
.light-mode [class*="bg-orange-500/10"],
.light-mode [class*="bg-orange-400/15"],
.light-mode [class*="bg-rose-500/10"],
.light-mode [class*="bg-amber-500/10"] {
    opacity: 0.12 !important;
}

.light-mode a:not(.theme-toggle) {
    color: inherit;
}

.light-mode .summary-toggle-btn {
    background: #f8f8f7;
    color: #111111;
    border-color: #e7e5e4;
}

.light-mode .summary-toggle-btn:not(.active) {
    background: #ffffff;
    color: #6b6b6b;
    border-color: #e7e5e4;
}

.light-mode .summary-toggle-btn.active {
    background: #D46A1A;
    color: #ffffff;
    border-color: #D46A1A;
    box-shadow: 0 0 0 1px rgba(212, 106, 26, 0.12);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.theme-toggle:hover {
    border-color: rgba(249, 115, 22, 0.45);
    color: var(--color-accent);
    transform: translateY(-1px);
}

.theme-toggle svg {
    width: 0.85rem;
    height: 0.85rem;
}

.theme-toggle .theme-icon-sun { display: none; }
.light-mode .theme-toggle .theme-icon-sun { display: block; }
.light-mode .theme-toggle .theme-icon-moon { display: none; }

.light-mode .hover\:bg-\[#242220\]:hover,
.light-mode .hover\:bg-white\/\[0\.03\]:hover,
.light-mode .hover\:bg-white\/\[0\.04\]:hover,
.light-mode .hover\:bg-white\/\[0\.06\]:hover,
.light-mode .hover\:bg-white\/\[0\.07\]:hover,
.light-mode .hover\:bg-white\/\[0\.08\]:hover {
    background-color: var(--public-surface-soft, #f7f3ee) !important;
}

.light-mode [class~="hover:text-white"]:hover,
.light-mode [class~="hover:text-slate-100"]:hover,
.light-mode [class~="hover:text-[#f0ede8]"]:hover,
.light-mode [class~="hover:text-[#ffffff]"]:hover {
    color: var(--text-primary, #16110d) !important;
}

.light-mode [class~="hover:text-slate-300"]:hover,
.light-mode [class~="hover:text-slate-400"]:hover,
.light-mode [class~="hover:text-[#8a8480]"]:hover,
.light-mode [class~="hover:text-[#f0ede8]/90"]:hover,
.light-mode [class~="hover:text-[#f0ede8]/80"]:hover,
.light-mode [class~="hover:text-[#f0ede8]/70"]:hover {
    color: var(--text-secondary, #433a33) !important;
}

.light-mode .text-orange-100,
.light-mode .text-orange-200,
.light-mode .text-amber-100,
.light-mode .text-slate-200,
.light-mode .text-slate-300,
.light-mode .text-slate-400,
.light-mode .text-slate-500,
.light-mode .text-white\/50,
.light-mode .text-white\/40,
.light-mode .text-white\/45,
.light-mode .text-white\/70 {
    color: #2f2f2f !important;
}

.light-mode .bg-orange-400\/10,
.light-mode .bg-orange-400\/12,
.light-mode .bg-orange-400\/15,
.light-mode .bg-orange-400\/20,
.light-mode .bg-orange-500\/10,
.light-mode .bg-orange-500\/12,
.light-mode .bg-orange-500\/18,
.light-mode .bg-orange-500\/5,
.light-mode .bg-amber-400\/12,
.light-mode .bg-amber-400\/18,
.light-mode .bg-red-500\/10,
.light-mode .bg-red-500\/15,
.light-mode .bg-rose-500\/10,
.light-mode .bg-green-500\/10,
.light-mode .bg-emerald-500\/10,
.light-mode .bg-emerald-500\/20,
.light-mode .bg-[#D46A1A]\/10,
.light-mode .bg-[#D46A1A]\/20,
.light-mode .bg-[#D46A1A]\/30,
.light-mode .bg-[#D46A1A]\/\[0\.03\] {
    background-color: rgba(249, 115, 22, 0.10) !important;
}

.light-mode [style*="linear-gradient(180deg, #1a1917 0%, rgba(249, 115, 22, 0.04) 100%)"] {
    background: linear-gradient(180deg, #ffffff 0%, rgba(249, 115, 22, 0.08) 100%) !important;
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.08), 0 0 0 1px rgba(17,17,17,0.04), 0 20px 60px rgba(17,17,17,0.06) !important;
}

.light-mode input,
.light-mode select,
.light-mode textarea {
    background-color: var(--public-surface, #fcfbf9) !important;
    color: var(--text-primary, #16110d) !important;
    border-color: var(--color-border, #e8dfd4) !important;
}

.light-mode input::placeholder,
.light-mode textarea::placeholder {
    color: var(--text-muted, #7a6f67) !important;
}