/* Shared light/dark theme. Used by index.html and work.html. */
  /* Winter theme: snow photo background with a dark wash so text stays readable */
  #snow-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(7, 10, 22, 0.62) 0%, rgba(7, 10, 22, 0.82) 100%),
      url('images/snow-bg.png') center / cover no-repeat;
  }
  #snow-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
  }

  /* ===== LIGHT THEME (cream background, black text) ===== */
  html[data-theme="light"] body {
    background: #fffeef !important;
    background-image: none !important;
    color: #111827 !important;
  }
  html[data-theme="light"] #snow-bg { display: none; }
  html[data-theme="light"] .glow-indigo, html[data-theme="light"] .glow-teal { opacity: 0.4; }

  /* Text: reverse white and light greys to black, keep accents readable */
  html[data-theme="light"] .text-white, html[data-theme="light"] .text-slate-200, html[data-theme="light"] .text-slate-300, html[data-theme="light"] .text-slate-400 { color: #1f2937 !important; }
  html[data-theme="light"] .text-slate-500 { color: #6b7280 !important; }
  html[data-theme="light"] .text-indigo-300, html[data-theme="light"] .text-indigo-400 { color: #4338ca !important; }
  html[data-theme="light"] .text-teal-300, html[data-theme="light"] .text-teal-400 { color: #0f766e !important; }
  html[data-theme="light"] .text-sky-300 { color: #0369a1 !important; }
  html[data-theme="light"] .text-emerald-400 { color: #047857 !important; }
  html[data-theme="light"] .group:hover .group-hover\:text-indigo-300, html[data-theme="light"] .group:hover .group-hover\:text-indigo-400,
  html[data-theme="light"] .hover\:text-indigo-400:hover, html[data-theme="light"] .hover\:text-indigo-300:hover { color: #4338ca !important; }
  html[data-theme="light"] .hover\:text-white:hover { color: #111827 !important; }
  html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4 { color: #111827; }

  /* Glass panels become light frosted cards */
  html[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(99, 102, 241, 0.22) !important;
    box-shadow: 0 10px 30px -14px rgba(60, 50, 30, 0.18);
  }
  html[data-theme="light"] .glass-panel:hover { box-shadow: 0 14px 34px -10px rgba(82, 71, 205, 0.22); }
  html[data-theme="light"] .glass-header {
    background: rgba(255, 252, 245, 0.5) !important;
    border-color: rgba(99, 102, 241, 0.22) !important;
    box-shadow: 0 10px 30px -14px rgba(60, 50, 30, 0.22);
  }

  /* Section backgrounds and chips */
  html[data-theme="light"] .bg-slate-950\/60, html[data-theme="light"] .bg-slate-950\/95, html[data-theme="light"] .bg-slate-900\/60, html[data-theme="light"] .bg-slate-900\/90,
  html[data-theme="light"] .bg-slate-900, html[data-theme="light"] .bg-slate-800\/80, html[data-theme="light"] .bg-slate-800\/90 { background-color: rgba(255, 255, 255, 0.7) !important; }
  html[data-theme="light"] .bg-slate-950\/80 { background-color: rgba(255, 255, 255, 0.9) !important; }
  html[data-theme="light"] .bg-indigo-950\/80, html[data-theme="light"] .bg-indigo-950\/70, html[data-theme="light"] .bg-indigo-950 { background-color: rgba(238, 242, 255, 0.95) !important; }
  html[data-theme="light"] .border-slate-800\/80, html[data-theme="light"] .border-slate-800, html[data-theme="light"] .border-slate-700, html[data-theme="light"] .border-slate-700\/80,
  html[data-theme="light"] .border-slate-700\/60 { border-color: rgba(15, 23, 42, 0.12) !important; }
  html[data-theme="light"] .border-b, html[data-theme="light"] .border-t { border-color: rgba(15, 23, 42, 0.12); }
  html[data-theme="light"] .border-indigo-500\/20, html[data-theme="light"] .border-indigo-500\/25, html[data-theme="light"] .border-indigo-500\/30 { border-color: rgba(99, 102, 241, 0.25) !important; }

  /* Modal */
  html[data-theme="light"] .modal-backdrop { background: rgba(250, 246, 239, 0.92) !important; }
  html[data-theme="light"] #modal-work-detail .glass-panel { background: #ffffff !important; }
  html[data-theme="light"] .custom-modal-scroll { color: #1f2937; }

  /* Snow: soft grey-blue flakes on cream (set in the snow script) */
  html[data-theme="light"] ::selection { background-color: #c7d2fe !important; color: #111827 !important; }

  /* Theme toggle button */
  #theme-toggle {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: #ffffff;
    color: #0c0f1d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 60;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.45);
    transition: background-color 0.5s ease, color 0.5s ease, transform 0.3s ease;
  }
  #theme-toggle:hover { transform: translateX(-50%) scale(1.08); }
  html[data-theme="light"] #theme-toggle {
    background: #000000;
    color: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.35);
  }

  /* Dark theme: galaxy stars. Light theme: falling snow on cream. */
  #snow-bg { display: none !important; }
  #night-sky { display: block; }
  #snow-canvas { display: none; }
  html[data-theme="light"] #night-sky { display: none; }
  html[data-theme="light"] #snow-canvas { display: block; }

  /* Light theme: lighter blur so bubbles show softly behind the glass,
     and a darker gradient on the hero keyword so it reads on cream */
  html[data-theme="light"] .glass-panel,
  html[data-theme="light"] .glass-header {
    backdrop-filter: blur(6px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(130%) !important;
  }
  /* Light theme: CTA buttons keep white text, as in the dark theme */
  html[data-theme="light"] body a.bg-indigo-600,
  html[data-theme="light"] body a.bg-indigo-500,
  html[data-theme="light"] body a.bg-gradient-to-r,
  html[data-theme="light"] body a.bg-indigo-600 *,
  html[data-theme="light"] body a.bg-indigo-500 *,
  html[data-theme="light"] body a.bg-gradient-to-r * {
    color: #ffffff !important;
  }

  /* Light theme: section and footer backgrounds use the same cream tint as the header */
  html[data-theme="light"] #process,
  html[data-theme="light"] #selected-works,
  html[data-theme="light"] body > footer {
    background-color: rgba(255, 252, 245, 0.6) !important;
    border-color: rgba(99, 102, 241, 0.15) !important;
  }


/* ===== Case study pages: Stitch colour classes ===== */
html[data-theme="light"] body,
html[data-theme="light"] body.bg-\[\#070913\] {
  background-color: #fffeef !important;
  background-image: none !important;
  color: #111827 !important;
}
html[data-theme="light"] #bg-canvas,
html[data-theme="light"] #ambient-glow { display: none !important; }

html[data-theme="light"] body .text-on-surface,
html[data-theme="light"] body .text-white,
html[data-theme="light"] body .text-slate-100,
html[data-theme="light"] body .text-slate-200,
html[data-theme="light"] body .text-slate-300,
html[data-theme="light"] body .text-slate-400,
html[data-theme="light"] body .text-on-surface-variant { color: #1f2937 !important; }
html[data-theme="light"] body .text-slate-500 { color: #6b7280 !important; }
html[data-theme="light"] body .text-primary,
html[data-theme="light"] body .text-indigo-300,
html[data-theme="light"] body .text-indigo-400 { color: #4338ca !important; }
html[data-theme="light"] body .text-secondary,
html[data-theme="light"] body .text-sky-300 { color: #0369a1 !important; }
html[data-theme="light"] body .text-tertiary,
html[data-theme="light"] body .text-teal-300,
html[data-theme="light"] body .text-teal-400 { color: #0f766e !important; }
html[data-theme="light"] body .hover\:text-indigo-400:hover,
html[data-theme="light"] body .group:hover .group-hover\:text-indigo-400 { color: #4338ca !important; }

html[data-theme="light"] body .bg-\[\#11162b\]\/60,
html[data-theme="light"] body .bg-\[\#11162b\]\/80,
html[data-theme="light"] body .bg-\[\#11162b\]\/90,
html[data-theme="light"] body .bg-surface-container-lowest,
html[data-theme="light"] body .bg-surface-container-low,
html[data-theme="light"] body .bg-surface-container,
html[data-theme="light"] body .bg-surface-container-high,
html[data-theme="light"] body .bg-surface { background-color: rgba(255, 255, 255, 0.55) !important; }

html[data-theme="light"] body .border-white\/10,
html[data-theme="light"] body .border-white\/5 { border-color: rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] body .hover\:border-primary\/40:hover { border-color: rgba(79, 70, 229, 0.45) !important; }

/* Buttons keep white text in light mode, as on the homepage */
html[data-theme="light"] body .bg-primary-container,
html[data-theme="light"] body .bg-primary-container *,
html[data-theme="light"] body .bg-primary,
html[data-theme="light"] body .bg-primary * { color: #ffffff !important; }

html[data-theme="light"] body header.glass-panel { background: rgba(255, 252, 245, 0.6) !important; }

/* ===== Case study pages: section cards, grey boxes, next-case card ===== */
html[data-theme="light"] body .bg-surface-container-highest,
html[data-theme="light"] body .bg-surface-container-highest\/40,
html[data-theme="light"] body .bg-surface-container-high\/80,
html[data-theme="light"] body .bg-surface-container-high,
html[data-theme="light"] body .bg-surface-variant {
  background-color: rgba(255, 255, 255, 0.6) !important;
}
html[data-theme="light"] .glass-card {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 10px 30px -14px rgba(60, 50, 30, 0.2) !important;
}
html[data-theme="light"] .glass-card:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
}

/* ===== Case study 3: arbitrary text colour used on the body ===== */
html[data-theme="light"] body .text-\[\#f1f5f9\] { color: #1f2937 !important; }

/* ===== Any surface-tone background (case study pages), any opacity ===== */
html[data-theme="light"] body [class*="bg-surface-"] {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

/* ===== Case study 1: its own starfield canvas hides in light mode ===== */
html[data-theme="light"] #sky-canvas { display: none !important; }

/* ===== Case study 1: purple CTA keeps white text in light mode ===== */
html[data-theme="light"] body .bg-\[\#5247CD\],
html[data-theme="light"] body .bg-\[\#5247CD\] * { color: #ffffff !important; }

/* ===== Badges and pills readable on cream (badge-primary / teal / amber) ===== */
html[data-theme="light"] .badge-primary {
  background: rgba(79, 70, 229, 0.12) !important;
  border: 1px solid rgba(79, 70, 229, 0.35) !important;
  color: #3730a3 !important;
}
html[data-theme="light"] .badge-teal {
  background: rgba(20, 184, 166, 0.14) !important;
  border: 1px solid rgba(15, 118, 110, 0.35) !important;
  color: #0f5f58 !important;
}
html[data-theme="light"] .badge-amber {
  background: rgba(245, 158, 11, 0.16) !important;
  border: 1px solid rgba(180, 83, 9, 0.35) !important;
  color: #92400e !important;
}

/* ===== Pastel accent text darkened for light mode ===== */
html[data-theme="light"] body .text-rose-300,
html[data-theme="light"] body .text-rose-400 { color: #be123c !important; }
html[data-theme="light"] body .text-amber-300,
html[data-theme="light"] body .text-amber-400 { color: #b45309 !important; }
html[data-theme="light"] body .text-emerald-300,
html[data-theme="light"] body .text-emerald-400 { color: #047857 !important; }
html[data-theme="light"] body .text-secondary-container { color: #0e7490 !important; }

/* ===== Image lightbox stays dark, with light text and a visible close button ===== */
html[data-theme="light"] #image-lightbox,
html[data-theme="light"] #image-lightbox * { color: #f8fafc !important; }
html[data-theme="light"] #image-lightbox button { background-color: rgba(255, 255, 255, 0.12) !important; }

/* ===== Dark caption pills (e.g. over screenshots) keep light text in light mode ===== */
html[data-theme="light"] body [class*="bg-black/70"],
html[data-theme="light"] body [class*="bg-black/70"] * { color: #f8fafc !important; }

/* ===== Case study 3: "INTERACTION PATTERN" pill readable in light mode ===== */
html[data-theme="light"] body .bg-tertiary-container\/50 {
  background-color: rgba(20, 184, 166, 0.16) !important;
  border-color: rgba(15, 118, 110, 0.45) !important;
}
html[data-theme="light"] body .text-on-tertiary-container { color: #0f5f58 !important; }

/* ===== Next-case CTA: darker hover (light and dark), white text ===== */
body a.bg-primary-container:hover,
body a.bg-primary-container:hover * {
  background-color: #4338ca !important;
  color: #ffffff !important;
}

/* ===== Image enlargement windows (all case studies): dark overlay, light text, visible close ===== */
html[data-theme="light"] #image-lightbox-modal,
html[data-theme="light"] #image-lightbox-modal * { color: #f8fafc !important; }
html[data-theme="light"] #image-lightbox-modal #lightbox-caption { color: #e2e8f0 !important; }
html[data-theme="light"] #image-lightbox-modal button { background-color: rgba(255, 255, 255, 0.12) !important; }

/* ===== Footer hover glow in light mode (matches the dark theme) ===== */
html[data-theme="light"] body footer.glass-panel {
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
html[data-theme="light"] body footer.glass-panel:hover {
  border-color: rgba(96, 165, 250, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25), 0 14px 40px -6px rgba(79, 70, 229, 0.35), 0 0 30px rgba(59, 130, 246, 0.35) !important;
}

/* ===== Scrollbar in light mode: cream track, visible thumb, primary on hover ===== */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #fffeef; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #a5a3d9; border-radius: 4px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #5247cd; }
html[data-theme="light"] .custom-modal-scroll::-webkit-scrollbar-track { background: #fffeef; }
html[data-theme="light"] .custom-modal-scroll::-webkit-scrollbar-thumb { background: #a5a3d9; }
html[data-theme="light"] .custom-modal-scroll::-webkit-scrollbar-thumb:hover { background: #5247cd; }

/* ===== Case study 2: pale labels made readable on cream ===== */
html[data-theme="light"] body .text-primary-fixed,
html[data-theme="light"] body .text-primary-fixed-dim { color: #3730a3 !important; }
html[data-theme="light"] body .text-outline { color: #374151 !important; }

/* ===== Icon tiles and number badges readable in light mode ===== */
html[data-theme="light"] body .bg-tertiary-container,
html[data-theme="light"] body .bg-tertiary-container * { color: #ffffff !important; }
html[data-theme="light"] body .bg-secondary-container {
  background-color: #0e7490 !important;
}
html[data-theme="light"] body .bg-secondary-container,
html[data-theme="light"] body .bg-secondary-container * { color: #ffffff !important; }
html[data-theme="light"] body .bg-primary-container,
html[data-theme="light"] body .bg-primary-container * { color: #ffffff !important; }
html[data-theme="light"] body .w-10.h-10.bg-surface-container-highest {
  background-color: rgba(79, 70, 229, 0.14) !important;
  border: 1px solid rgba(79, 70, 229, 0.3);
}

/* ===== Case study 2: stat and label colours darkened for light mode ===== */
html[data-theme="light"] body .text-error { color: #b91c1c !important; }
html[data-theme="light"] body .text-tertiary { color: #0b5e55 !important; }
html[data-theme="light"] body .text-secondary { color: #075985 !important; }
html[data-theme="light"] body .text-primary { color: #3730a3 !important; }

/* ===== Work modal buttons in light mode: white CTA text, visible borders, dark-style hovers ===== */
html[data-theme="light"] body .bg-indigo-600,
html[data-theme="light"] body .bg-indigo-600 * { color: #ffffff !important; }
html[data-theme="light"] body .bg-indigo-600:hover { background-color: #4338ca !important; }
html[data-theme="light"] #modal-work-detail button:not(.bg-indigo-600),
html[data-theme="light"] #modal-work-detail a.border:not(.bg-indigo-600) {
  background-color: #ffffff !important;
  border: 1px solid rgba(79, 70, 229, 0.4) !important;
  color: #1f2937 !important;
}
html[data-theme="light"] #modal-work-detail button:not(.bg-indigo-600):hover,
html[data-theme="light"] #modal-work-detail a.border:not(.bg-indigo-600):hover {
  background-color: #eef2ff !important;
  border-color: #6366f1 !important;
  color: #3730a3 !important;
}
html[data-theme="light"] #modal-work-detail button[onclick="closeWorkModal()"]:not(.bg-indigo-600):hover {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* ===== Project page (work.html) navigation buttons: same light styles as the work pop-up ===== */
html[data-theme="light"] body #nav-prev,
html[data-theme="light"] body #nav-next,
html[data-theme="light"] body #bottom-prev,
html[data-theme="light"] body #bottom-next {
  background-color: #ffffff !important;
  border: 1px solid rgba(79, 70, 229, 0.4) !important;
  color: #1f2937 !important;
}
html[data-theme="light"] body #nav-prev:hover,
html[data-theme="light"] body #nav-next:hover,
html[data-theme="light"] body #bottom-prev:hover,
html[data-theme="light"] body #bottom-next:hover {
  background-color: #eef2ff !important;
  border-color: #6366f1 !important;
  color: #3730a3 !important;
}

/* ===== Image frames: lighter backdrop so dark screenshots stay visible (both themes) ===== */
.img-zoom-container,
#work-modal-gallery .bg-slate-950,
figure .bg-slate-950,
.bg-slate-900\/60 {
  background-color: #1e2a44 !important;
}
html[data-theme="light"] .img-zoom-container,
html[data-theme="light"] #work-modal-gallery .bg-slate-950,
html[data-theme="light"] figure .bg-slate-950,
html[data-theme="light"] .bg-slate-900\/60 {
  background-color: #e4e9f5 !important;
}

/* ===== Ecosystem diagram (case study 4): dark by default, light theme overrides ===== */
.eco-r1 { fill: #1e1b4b; stroke: #818cf8; stroke-opacity: .5; }
.eco-r2 { fill: #0f2a2a; stroke: #2dd4bf; stroke-opacity: .5; }
.eco-r3 { fill: #2a1f0f; stroke: #fbbf24; stroke-opacity: .5; }
.eco-r4 { fill: #1f1020; stroke: #f472b6; stroke-opacity: .5; }
.eco-t1 { fill: #e0e7ff; font-weight: 700; } .eco-s1 { fill: #a5b4fc; font-size: 13px; }
.eco-t2 { fill: #ccfbf1; font-weight: 700; } .eco-s2 { fill: #5eead4; font-size: 13px; }
.eco-t3 { fill: #fef3c7; font-weight: 700; } .eco-s3 { fill: #fcd34d; font-size: 13px; }
.eco-t4 { fill: #fce7f3; font-weight: 700; } .eco-s4 { fill: #f9a8d4; font-size: 13px; }
[data-theme="light"] .eco-r1 { fill: #eef2ff; stroke: #6366f1; stroke-opacity: .6; }
[data-theme="light"] .eco-r2 { fill: #ecfdf5; stroke: #10b981; stroke-opacity: .6; }
[data-theme="light"] .eco-r3 { fill: #fffbeb; stroke: #f59e0b; stroke-opacity: .6; }
[data-theme="light"] .eco-r4 { fill: #fdf2f8; stroke: #ec4899; stroke-opacity: .6; }
[data-theme="light"] .eco-t1, [data-theme="light"] .eco-t2,
[data-theme="light"] .eco-t3, [data-theme="light"] .eco-t4 { fill: #111827; }
[data-theme="light"] .eco-s1 { fill: #3730a3; }
[data-theme="light"] .eco-s2 { fill: #065f46; }
[data-theme="light"] .eco-s3 { fill: #92400e; }
[data-theme="light"] .eco-s4 { fill: #9d174d; }