/* =====================================================================
   gierz.eu — family corner. Layered on top of the shared mocha
   styles.css (which is left untouched, so gierz.xyz is unaffected).
   Adds: a warm-cream light theme toggled by the banker's lamp, the
   lamp button itself, and muted placeholder cards. Dark stays default.
   ===================================================================== */

/* --- the banker's lamp toggle ------------------------------------------ */
.card { position: relative; }

.theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0.3rem;
  border-radius: 9px;
  background: var(--surface0);
  border: 1px solid var(--surface1);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover { border-color: var(--blue); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.lamp { display: block; }
.lamp-shade { fill: var(--green); }            /* classic green lampshade  */
.lamp-neck,
.lamp-base  { fill: var(--peach); }            /* brass stem + base        */
.lamp-glow {
  fill: #ffcf6b;
  opacity: 0;                                  /* off in the dark          */
  filter: blur(1px);
  transition: opacity 0.45s ease;
}
:root:not([data-theme="light"]) .lamp { opacity: 0.78; }  /* dimmed when off */
:root[data-theme="light"] .lamp-glow { opacity: 0.9; }    /* switched on     */

/* --- placeholder cards: family without a page yet ---------------------- */
.service-placeholder {
  opacity: 0.6;
  cursor: default;
}
.service-placeholder:hover {
  border-color: var(--surface1);
  background: var(--surface0);
  transform: none;
}

/* --- smooth the light/dark swap ---------------------------------------- */
/* :where() keeps specificity 0 so the snappy hover transitions still win. */
:where(body, body *) {
  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .theme-anim .service,
  .theme-anim .link-pill,
  .theme-anim .theme-toggle {
    transition:
      background-color 0.5s ease, color 0.5s ease,
      border-color 0.5s ease, box-shadow 0.5s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(body, body *) { transition: none; }
}

/* --- light theme: warm cream paper ------------------------------------- */
/* Re-skins the same --vars the mocha theme defines on :root. Matches the
   palette used on the /work site so the family pages feel of a piece. */
:root[data-theme="light"] {
  --base:     #f3ead4;  /* desk: warm cream stock */
  --mantle:   #ece1c7;
  --crust:    #e2d4b4;
  --surface0: #faf4e4;  /* card / pill fills (lighter cream) */
  --surface1: #d9c8a3;  /* borders / grid-line (warm tan) */
  --overlay0: #b3a17e;
  --overlay1: #8c7a5a;  /* muted labels */
  --text:     #3a3326;  /* sepia ink */
  --subtext:  #5f5642;
  --blue:     #2f6ae0;  /* ink-blue links */
  --lavender: #4a6fa5;  /* headings / cursor (ink blue) */
  --sapphire: #1f7a96;
  --mauve:    #8a5e9c;
  --green:    #5a7d2e;  /* olive lampshade in light mode */
  --peach:    #c4661a;  /* amber brass */
}
:root[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(150,120,70,0.06), transparent 60%),
    var(--base);
}
:root[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(120,98,58,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,98,58,0.11) 1px, transparent 1px);
}
:root[data-theme="light"] .card {
  /* a sheet of cream paper resting on the desk */
  background: rgba(250, 245, 230, 0.85);
  border-color: #ddccac;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 40px -24px rgba(58,51,38,0.30);
}