/* ---- Dark mode ----
 * Turned on by the `is-dark` class on <html>.
 *   - Every page: set by js/theme.js (the nav's theme button, or the
 *     visitor's system setting until they pick one)
 *
 * The site's colors all come from a few variables, so dark mode just
 * swaps their values. Registering them with @property lets them fade
 * smoothly instead of snapping (browsers without it simply switch).
 */
@property --page-bg  { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --black    { syntax: '<color>'; inherits: true; initial-value: #130f0f; }
@property --black-4  { syntax: '<color>'; inherits: true; initial-value: #787474; }
@property --off-white { syntax: '<color>'; inherits: true; initial-value: #f4f4f4; }
@property --divider  { syntax: '<color>'; inherits: true; initial-value: #a6a6a6; }

html {
  --page-bg: #fff;
  transition:
    --page-bg 0.6s ease,
    --black 0.6s ease,
    --black-4 0.6s ease,
    --off-white 0.6s ease,
    --divider 0.6s ease;
}

html.is-dark {
  --page-bg: #130f0f;   /* the site's black */
  --black: #f4f2f0;     /* main text */
  --black-4: #9b9696;   /* gray text */
  --off-white: #1c1818; /* footer and bottom fade */
  --divider: #3d3838;
  color-scheme: dark;
}

body {
  background-color: var(--page-bg);
}

/* Logo is drawn in near-black, so flip it to near-white */
.logo {
  transition: filter 0.6s ease;
}
html.is-dark .logo {
  filter: invert(1);
}

/* Text that isn't given a color (it's #333 in css/styles.css) */
html.is-dark body {
  color: var(--black);
}

/* The shared glass (css/styles.css): smoky instead of bright, as the
   homepage tab already does (css/view-tab.css). The project panel's
   Credits / Fun facts cards use it. */
html.is-dark {
  --lens-bg:
    radial-gradient(60% 35% at 50% 12%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.08) 100%);
  --lens-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 1px rgba(255, 255, 255, 0.06),
    inset 0 -4px 8px rgba(0, 0, 0, 0.2),
    0 0 0 0.5px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 6px 12px rgba(0, 0, 0, 0.25);
  --slot-bg: rgba(0, 0, 0, 0.25);
  --slot-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.06);
  --icon-emboss: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.6));
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Empty grid cells on project pages (css/project-grid.css) */
html.is-dark .project-grid_cell {
  background-color: #231e1e;
}

/* ---- The theme switch at the end of the nav (js/theme.js) ----
   Built like the homepage tab's carousel / list switch (css/view-tab.css),
   a little smaller: a clear glass pill, a recessed slot in it with a sun
   and a moon, and a glass lens that slides over the chosen one. Either
   icon, or the lens itself, flips it. */
.nav-theme {
  --ts-btn: 2.25rem; /* each icon's circle */
  --ts-gap: .25rem;
  flex: none;
  margin: 0 0 0 -3rem; /* closer to Thoughts than the nav's wide gap */
  line-height: 1;
}

.theme-switch {
  display: flex;
  padding: .25rem;
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

.theme-slot {
  position: relative;
  display: flex;
  gap: var(--ts-gap);
  border-radius: 999px;
  background-color: var(--slot-bg);
  box-shadow: var(--slot-shadow);
}

/* The lens, over the sun in light mode and the moon in dark */
.theme-slot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--ts-btn);
  height: var(--ts-btn);
  border-radius: 50%;
  background: var(--lens-bg);
  box-shadow: var(--lens-shadow);
  pointer-events: none;
}

html.is-dark .theme-slot::before {
  translate: calc(var(--ts-btn) + var(--ts-gap)) 0;
}

/* Only slides once the page is set up, so it doesn't slide in on load */
.theme-slot.is-ready::before {
  transition: translate .45s cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-slot button {
  position: relative; /* under the lens */
  display: grid;
  place-items: center;
  width: var(--ts-btn);
  height: var(--ts-btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--black);
  cursor: pointer;
}

.theme-slot button:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

/* The chosen icon full size, the other a little smaller (as in the tab) */
.theme-icon {
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  filter: var(--icon-emboss);
  scale: .8;
  transition: scale .45s cubic-bezier(0.22, 1, 0.36, 1);
}

html:not(.is-dark) .theme-icon.is-sun,
html.is-dark .theme-icon.is-moon {
  scale: 1;
}

.theme-icon.is-sun {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E");
}

.theme-icon.is-moon {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.2A8.5 8.5 0 1 1 9.8 3.5a7 7 0 0 0 10.7 10.7Z'/%3E%3C/svg%3E");
}

@media screen and (max-width: 991px) {
  .nav-theme {
    margin-left: -2rem;
  }
}

/* Phones: a smaller switch and a tighter nav, so About, Thoughts and the
   switch fit on one row */
@media screen and (max-width: 479px) {
  .grid-col-4.is-navbar {
    column-gap: 1.5rem;
  }

  .nav-theme {
    --ts-btn: 1.875rem;
    --ts-gap: .125rem;
    margin-left: -.5rem;
  }

  .theme-switch {
    padding: .1875rem;
  }

  .theme-icon {
    width: 1.0625rem;
    height: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-slot.is-ready::before,
  .theme-icon {
    transition: none;
  }
}