/* Warm, downward light shared by the public site and dashboard. */
html[data-theme="light"] {
  --shadow-rgb: 48 39 28;
  --shadow-contact: 0 1px 2px rgb(var(--shadow-rgb) / .10);
  --shadow-surface: 0 2px 4px -2px rgb(var(--shadow-rgb) / .10),
                    0 12px 26px -14px rgb(var(--shadow-rgb) / .16);
  --shadow-artwork: 0 2px 5px -2px rgb(var(--shadow-rgb) / .12),
                    0 10px 20px -8px rgb(var(--shadow-rgb) / .14);
  --shadow-raised: 0 3px 8px -3px rgb(var(--shadow-rgb) / .16),
                   0 16px 28px -12px rgb(var(--shadow-rgb) / .22);
  --shadow-floating: 0 4px 12px -4px rgb(var(--shadow-rgb) / .12),
                     0 24px 56px -16px rgb(var(--shadow-rgb) / .22);
}

/* One elevation for the outer panels, including every project presentation. */
html[data-theme="light"] :is(.home-about-block, .story .card, .project, .project-tab.w-tab-pane, .dash .card) {
  box-shadow: var(--shadow-surface);
}

html[data-theme="light"] :is(.book-cover .book-image, .skill-image, .swiper-slide) {
  box-shadow: var(--shadow-artwork);
}

/* Album sleeves need a little more separation from their white tray. */
html[data-theme="light"] .cover {
  box-shadow: 0 3px 5px -2px rgb(var(--shadow-rgb) / .20),
              0 12px 22px -8px rgb(var(--shadow-rgb) / .22);
}

/* Keep the printed page edges, without a second long shadow underneath. */
html[data-theme="light"] .book-cover .book-inside {
  box-shadow: var(--shadow-contact), inset -2px 0 0 grey,
    inset -3px 0 0 #dbdbdb, inset -4px 0 0 white,
    inset -5px 0 0 #dbdbdb, inset -6px 0 0 white,
    inset -7px 0 0 #dbdbdb, inset -8px 0 0 white,
    inset -9px 0 0 #dbdbdb;
}

html[data-theme="light"] .paper-card::before,
html[data-theme="light"] .paper-card::after {
  box-shadow: var(--shadow-contact);
}

/* Filters follow the folded silhouette instead of drawing a rectangular box. */
html[data-theme="light"] .paper-card-lift {
  filter: drop-shadow(0 2px 2px rgb(var(--shadow-rgb) / .08))
          drop-shadow(0 8px 9px rgb(var(--shadow-rgb) / .10));
}

html[data-theme="light"] .paper-card-fold {
  filter: drop-shadow(-1px 1px 1px rgb(var(--shadow-rgb) / .12));
}

html[data-theme="light"] .paper-corner-fold {
  filter: drop-shadow(-2px 3px 3px rgb(var(--shadow-rgb) / .14));
}

html[data-theme="light"] .project-video {
  box-shadow: none;
}

html[data-theme="light"] .project-tab.w-tab-pane { border-radius: 40px; }

/* Give the mobile carousel's shadows room inside its clipping boundary.
   The negative margins keep the cards and the section spacing in place. */
html[data-theme="light"] .projects-slider.mobile {
  padding-top: 12px;
  padding-bottom: 28px;
  margin-top: -12px;
  margin-bottom: -28px;
}

html[data-theme="light"] .paper-reader::before,
html[data-theme="light"] :is(.pop-up-card, .dash .dialog) {
  box-shadow: var(--shadow-floating);
}

html[data-theme="light"] :is(.paper-dialog, .dash .dialog)::backdrop {
  background: rgb(var(--shadow-rgb) / .22);
}

html[data-theme="light"] :is(.flash, .dash .toast, .dash .chart__tooltip, .dash .form-footer) {
  box-shadow: var(--shadow-artwork);
}

@media (hover: hover) {
  html[data-theme="light"] :is(.book-image:hover, .story .card:hover, .link-card:hover) {
    box-shadow: var(--shadow-raised);
  }
}

@media (max-width: 860px) {
  html[data-theme="light"] .dash .sidebar { box-shadow: var(--shadow-floating); }
}