/* Calm Sheets Dark Mode — warm olive palette inspired by email dark mode */

/* ===== Core surface overrides ===== */
html.dark {
  color-scheme: dark;
}

html.dark body,
html.dark .bg-surface {
  background-color: #1a1c14 !important;
  color: #e4e2d6 !important;
}

html.dark .bg-surface-container-low,
html.dark .bg-\[\#f6f4e9\] {
  background-color: #242620 !important;
}

html.dark .bg-surface-container-high,
html.dark .bg-\[\#eae8de\] {
  background-color: #2e3028 !important;
}

html.dark .bg-surface-container-highest,
html.dark .bg-\[\#e4e3d8\] {
  background-color: #393b32 !important;
}

/* Cream background overrides */
html.dark .bg-\[\#fcfaef\],
html.dark [style*="background-color: #fcfaef"],
html.dark [style*="background:#fcfaef"] {
  background-color: #1a1c14 !important;
}

/* Nav backgrounds */
html.dark .bg-\[\#fcfaef\]\/90,
html.dark nav {
  background-color: rgba(26, 28, 20, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Nav links — white in dark mode */
html.dark nav a.text-on-surface-variant {
  color: #e4e2d6 !important;
}

html.dark nav a.text-on-surface-variant:hover {
  color: #a3bf97 !important;
}

html.dark .shadow-sm {
  box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* ===== Text colors ===== */
html.dark .text-on-surface,
html.dark .text-\[\#1b1c16\] {
  color: #e4e2d6 !important;
}

html.dark .text-on-surface-variant,
html.dark .text-\[\#434840\] {
  color: #9a9e92 !important;
}

html.dark .text-on-primary-container,
html.dark .text-\[\#22391b\] {
  color: #cdebbf !important;
}

html.dark .text-primary,
html.dark .text-\[\#4b6542\] {
  color: #a3bf97 !important;
}

html.dark .text-outline,
html.dark .text-\[\#74796f\] {
  color: #7d8277 !important;
}

/* ===== Primary / accent ===== */
html.dark .bg-primary {
  background-color: #4b6542 !important;
}

html.dark .bg-primary-container {
  background-color: #3a4d34 !important;
}

html.dark .bg-primary-fixed {
  background-color: #2d3d28 !important;
}

html.dark .bg-primary\/10 {
  background-color: rgba(75, 101, 66, 0.2) !important;
}

html.dark .bg-primary\/8 {
  background-color: rgba(75, 101, 66, 0.15) !important;
}

html.dark .bg-primary-fixed\/50 {
  background-color: rgba(45, 61, 40, 0.5) !important;
}

html.dark .bg-primary-fixed\/30 {
  background-color: rgba(45, 61, 40, 0.35) !important;
}

/* ===== Borders ===== */
html.dark .border-outline-variant,
html.dark .border-outline-variant\/10 {
  border-color: rgba(58, 61, 54, 0.5) !important;
}

html.dark [style*="border-bottom: 1px solid #c4c8bd"] {
  border-color: rgba(58, 61, 54, 0.4) !important;
}

html.dark hr,
html.dark .border-t {
  border-color: rgba(58, 61, 54, 0.5) !important;
}

/* ===== Cards and containers ===== */
html.dark [style*="background: linear-gradient(160deg, #f6f4e9"],
html.dark [style*="background: linear-gradient(135deg, #fcfaef"],
html.dark [style*="background: linear-gradient(135deg, #f6f4e9"] {
  background: linear-gradient(135deg, #242620 0%, #2e3028 100%) !important;
  border-left-color: #5a7a50 !important;
}

html.dark [style*="border: 2px solid rgba(75,101,66,0.15)"] {
  border-color: rgba(75, 101, 66, 0.3) !important;
}

/* Rounded cards with light backgrounds */
html.dark .rounded-\[2rem\][class*="bg-"],
html.dark .rounded-\[2rem\][style*="background"] {
  background: linear-gradient(160deg, #242620 0%, #2e3028 100%) !important;
}

/* ===== Content typography (guide pages) ===== */
html.dark .content h1,
html.dark .content h2 {
  color: #cdebbf !important;
}

html.dark .content h2 {
  border-bottom-color: rgba(58, 61, 54, 0.4) !important;
}

html.dark .content h3 {
  color: #a3bf97 !important;
}

html.dark .content p,
html.dark .content li {
  color: #b8bab0 !important;
}

html.dark .content strong {
  color: #e4e2d6 !important;
}

html.dark .content a {
  color: #a3bf97 !important;
}

html.dark .content a:hover {
  color: #cdebbf !important;
}

html.dark .content blockquote {
  border-left-color: #4b6542 !important;
  color: #9a9e92 !important;
}

html.dark .content hr {
  border-top-color: rgba(58, 61, 54, 0.4) !important;
}

html.dark .content code {
  background-color: #2e3028 !important;
  color: #e4e2d6 !important;
}

/* Tables */
html.dark .content thead th {
  background-color: #2e3028 !important;
  color: #cdebbf !important;
}

html.dark .content tbody td {
  border-top-color: rgba(58, 61, 54, 0.3) !important;
}

html.dark .content tbody tr:nth-child(even) {
  background-color: #22241e !important;
}

html.dark .content tbody tr:hover {
  background-color: #2e3028 !important;
}

/* Checkboxes */
html.dark .content input[type="checkbox"] {
  border-color: #7d8277 !important;
  background-color: transparent !important;
}

html.dark .content input[type="checkbox"]:checked {
  background-color: #4b6542 !important;
  border-color: #4b6542 !important;
}

/* ===== Standard pricing button — light bg in dark mode ===== */
html.dark button.bg-surface-container-high.text-on-surface.font-headline.font-bold {
  background-color: #eae8de !important;
  color: #22391b !important;
}

html.dark button.bg-surface-container-high.text-on-surface.font-headline.font-bold:hover {
  background-color: #e4e3d8 !important;
  color: #22391b !important;
}

/* ===== Buttons / CTAs ===== */
html.dark .bg-on-primary,
html.dark [style*="background:linear-gradient(135deg,#4b6542,#88a47c)"] {
  background: linear-gradient(135deg, #5a7a50, #6d9462) !important;
}

html.dark .text-on-primary {
  color: #ffffff !important;
}

/* ===== Download modal + Wallpaper modal ===== */
html.dark #download-modal,
html.dark #wallpaper-modal {
  background: rgba(0, 0, 0, 0.7) !important;
}

html.dark #download-modal .bg-surface,
html.dark #wallpaper-modal .bg-surface {
  background-color: #393b32 !important;
  border: 1px solid rgba(75, 101, 66, 0.5);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
}

html.dark #download-modal h2,
html.dark #wallpaper-modal h2 {
  color: #e4e2d6 !important;
}

html.dark #download-modal p,
html.dark #wallpaper-modal p {
  color: #b8bab0 !important;
}

html.dark #download-modal h3,
html.dark #wallpaper-modal h3 {
  color: #cdebbf !important;
}

html.dark #download-modal li,
html.dark #wallpaper-modal li {
  color: #b8bab0 !important;
}

html.dark #download-modal strong,
html.dark #wallpaper-modal strong {
  color: #e4e2d6 !important;
}

html.dark #download-modal .bg-surface-container-low,
html.dark #wallpaper-modal .bg-surface-container-low {
  background-color: #242620 !important;
}

html.dark #download-modal button.absolute,
html.dark #wallpaper-modal button.absolute {
  color: #9a9e92 !important;
}

html.dark #download-modal .text-primary,
html.dark #wallpaper-modal .text-primary {
  color: #a3bf97 !important;
}

/* ===== Script quote bubbles ===== */
html.dark .bg-surface\/60 {
  background-color: #eae8de !important;
  backdrop-filter: none !important;
}

html.dark .bg-surface\/60 p {
  color: #1b1c16 !important;
}

html.dark .bg-surface\/60 .text-on-surface-variant {
  color: #434840 !important;
}

/* ===== Tertiary text (Pro-only labels) — vibrant green in dark mode ===== */
html.dark .text-tertiary {
  color: #a3bf97 !important;
}

html.dark .text-on-tertiary-container {
  color: #cdebbf !important;
}

/* ===== Pricing cards ===== */
html.dark [style*="background-color:#fcfaef"],
html.dark [style*="background-color: #fcfaef"] {
  background-color: #242620 !important;
}

/* ===== PRO labels (text-primary/70) — brighter in dark mode ===== */
html.dark .text-primary\/70 {
  color: #cdebbf !important;
}

/* ===== Pro shimmer — keep visible on dark ===== */
html.dark .pro-shimmer {
  background: linear-gradient(90deg, #6d9462 0%, #a3bf97 40%, #cdebbf 50%, #a3bf97 60%, #6d9462 100%) !important;
  background-size: 200% auto;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ===== Ticker bar ===== */
html.dark .bg-\[\#22391b\] {
  background-color: #1a2615 !important;
}

/* ===== Selection color ===== */
html.dark ::selection {
  background-color: #3a4d34 !important;
  color: #cdebbf !important;
}

/* ===== Error colors ===== */
html.dark .text-error {
  color: #f2b8b5 !important;
}

html.dark .bg-error\/10 {
  background-color: rgba(242, 184, 181, 0.12) !important;
}

/* ===== Form inputs ===== */
html.dark input[type="email"],
html.dark input[type="text"],
html.dark select,
html.dark textarea {
  background-color: #1a1c14 !important;
  border: 1px solid #5a5d52 !important;
  color: #e4e2d6 !important;
}

html.dark input[type="email"]::placeholder,
html.dark input::placeholder {
  color: #7d8277 !important;
}

/* ===== Footer ===== */
html.dark footer {
  color: #7d8277 !important;
}

/* ===== Save-this-page banner (guide dashboard) ===== */
html.dark #save-banner .bg-primary-fixed {
  background-color: #2d3d28 !important;
  border: 1px solid rgba(75, 101, 66, 0.4);
}

html.dark #save-banner p,
html.dark #save-banner .text-on-primary-container,
html.dark #save-banner .text-on-primary-container\/80 {
  color: #e4e2d6 !important;
}

html.dark #save-banner .text-on-primary-container\/50 {
  color: #9a9e92 !important;
}

html.dark #save-banner .text-primary {
  color: #cdebbf !important;
}

/* ===== PDF picker checkboxes (guide dashboard) ===== */
html.dark #pdf-picker label {
  color: #b8bab0 !important;
}

/* ===== FAQ accordion ===== */
html.dark details summary {
  color: #e4e2d6 !important;
}

/* ===== Theme toggle button ===== */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(196, 200, 189, 0.25);
  background: transparent;
  cursor: pointer;
  color: #74796f;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.theme-toggle:hover {
  color: #4b6542;
  border-color: rgba(75, 101, 66, 0.4);
}

html.dark .theme-toggle {
  color: #9a9e92;
  border-color: rgba(58, 61, 54, 0.5);
}

html.dark .theme-toggle:hover {
  color: #cdebbf;
  border-color: rgba(75, 101, 66, 0.4);
}

/* ===== Guide dashboard cards ===== */
html.dark .guide-card {
  background-color: #2e3028 !important;
}

html.dark .guide-card:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

html.dark .guide-card h3 {
  color: #cdebbf !important;
}

html.dark .guide-card p {
  color: #9a9e92 !important;
}

/* ===== Landing page cards (bg-surface-container-lowest) ===== */
html.dark .bg-surface-container-lowest {
  background-color: #242620 !important;
}

html.dark [class*="bg-surface-container-lowest"] {
  background-color: #242620 !important;
}

/* ===== Article page content (uses .article-content, not .content) ===== */
html.dark .article-content h1,
html.dark .article-content h2 {
  color: #cdebbf !important;
}

html.dark .article-content h2 {
  border-bottom-color: rgba(58, 61, 54, 0.4) !important;
}

html.dark .article-content h3 {
  color: #a3bf97 !important;
}

html.dark .article-content p,
html.dark .article-content li {
  color: #b8bab0 !important;
}

html.dark .article-content strong {
  color: #e4e2d6 !important;
}

html.dark .article-content a {
  color: #a3bf97 !important;
}

html.dark .article-content blockquote {
  border-left-color: #4b6542 !important;
  color: #9a9e92 !important;
}

html.dark .article-content hr {
  border-top-color: rgba(58, 61, 54, 0.4) !important;
}

html.dark .article-content code {
  background-color: #2e3028 !important;
  color: #e4e2d6 !important;
}

html.dark .article-content ol,
html.dark .article-content ul {
  color: #b8bab0 !important;
}

/* Article tables */
html.dark .article-content thead th {
  background-color: #2e3028 !important;
  color: #cdebbf !important;
}

html.dark .article-content tbody td {
  border-top-color: rgba(58, 61, 54, 0.3) !important;
}

html.dark .article-content tbody tr:nth-child(even) {
  background-color: #22241e !important;
}

/* ===== Landing page feature cards & quote cards ===== */
html.dark .shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-xl {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Script/quote cards with inline bg */
html.dark [style*="background: rgba(75,101,66,0.1)"] {
  background: rgba(75, 101, 66, 0.2) !important;
}

/* Breathing circle on dark */
html.dark .breathe-circle {
  opacity: 0.3 !important;
}

/* Breathing timer — counter and label sit on a light circle, keep dark */
html.dark .countdown-number,
html.dark #breathCountdown,
html.dark #countdown {
  color: #22391b !important;
}

html.dark #phaseLabel,
html.dark #breathPhaseLabel {
  color: #4b6542 !important;
}

/* Breathing timer — technique education box */
html.dark #techniqueInfo p {
  color: #d0cec4 !important;
}

html.dark #techniqueInfo strong {
  color: #e4e2d6 !important;
}

html.dark #techniqueInfo .italic {
  color: #b8bab0 !important;
}

/* Landing page card text that doesn't use Tailwind classes */
html.dark .font-headline.text-xl.font-bold,
html.dark .font-headline.text-lg.font-bold {
  color: #e4e2d6 !important;
}

/* Primary gradient backgrounds (CTA sections) */
html.dark .primary-gradient {
  background: linear-gradient(135deg, #4b6542, #6d9462) !important;
}

/* ===== Pricing cards ===== */
html.dark .border-outline-variant\/15 {
  border-color: rgba(58, 61, 54, 0.4) !important;
}

html.dark .border-primary\/30 {
  border-color: rgba(75, 101, 66, 0.4) !important;
}

/* ===== Hero floating badge ("14 tools included") ===== */
html.dark .absolute.-bottom-4,
html.dark .absolute.\-bottom-4 {
  background-color: #2e3028 !important;
  border: 1px solid rgba(75, 101, 66, 0.3);
}

html.dark .absolute.-bottom-4 .text-on-surface,
html.dark .absolute.\-bottom-4 .text-on-surface {
  color: #e4e2d6 !important;
}

html.dark .absolute.-bottom-4 .text-on-surface-variant,
html.dark .absolute.\-bottom-4 .text-on-surface-variant {
  color: #b8bab0 !important;
}

/* ===== Homepage topic cards ===== */
html.dark .topic-card {
  background-color: #3e4138 !important;
}

html.dark .topic-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

html.dark .topic-card h2 {
  color: #e4e2d6 !important;
}

html.dark .topic-card p {
  color: #b8bab0 !important;
}

html.dark .topic-card .text-primary {
  color: #a3bf97 !important;
}

html.dark .topic-card .text-tertiary {
  color: #9a9e92 !important;
}

/* ===== Journey flow cards ===== */
html.dark .journey-card:hover {
  background-color: #2e3028 !important;
}

/* ===== Flight Day Timeline ===== */
html.dark .stage-card {
  background-color: #242620 !important;
}

html.dark .stage-card.current {
  background-color: #2e3028 !important;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.3) !important;
}

html.dark .stage-card.completed {
  background-color: #242620 !important;
}

html.dark .stage-body p,
html.dark .stage-body span {
  color: #d0cec4 !important;
}

html.dark .stage-body strong {
  color: #e4e2d6 !important;
}

html.dark .timeline::before {
  background-color: #3a3d34 !important;
}

html.dark .timeline-node {
  background-color: #1a1c14 !important;
  border-color: #3a3d34 !important;
  color: #9a9e92 !important;
}

html.dark .timeline-node.completed {
  background-color: #4b6542 !important;
  border-color: #4b6542 !important;
  color: #ffffff !important;
}

html.dark .timeline-node.current {
  background-color: #2d3d28 !important;
  border-color: #5a7a50 !important;
  color: #cdebbf !important;
}

html.dark .stage-card .text-primary {
  color: #cdebbf !important;
}

html.dark .stage-card .text-on-primary-container {
  color: #e4e2d6 !important;
}

html.dark .here-btn {
  background-color: #393b32 !important;
  color: #b8bab0 !important;
}

html.dark .here-btn:hover {
  background-color: #434540 !important;
}

html.dark .here-btn.active {
  background: linear-gradient(135deg, #5a7a50, #6d9462) !important;
  color: #ffffff !important;
}

html.dark .reset-link {
  color: #9a9e92 !important;
}

html.dark .reset-link:hover {
  color: #cdebbf !important;
}

/* ===== Meditation transcript sections ===== */
html.dark .transcript-section {
  background-color: #242620 !important;
}

html.dark .transcript-section.active {
  background-color: #2e3028 !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important;
}

html.dark .transcript-section h3.text-primary {
  color: #cdebbf !important;
}

html.dark .transcript-section .text-outline {
  color: #9a9e92 !important;
}

html.dark .transcript-section .text-on-surface-variant {
  color: #d0cec4 !important;
}

/* ===== Meditation mini-player ===== */
html.dark .mini-player {
  background-color: rgba(26, 28, 20, 0.94) !important;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.3) !important;
}

html.dark .mini-player #miniPhaseName {
  color: #cdebbf !important;
}

html.dark .mini-player #miniTimeDisplay {
  color: #e4e2d6 !important;
}

/* ===== Smooth transitions ===== */
body,
nav,
.bg-surface,
.content h1, .content h2, .content h3,
.content p, .content li, .content a {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}