/* Editorial roles are theme-independent. Font shorthands carry family, weight, size and leading. */
:root {
  --type-display-xl: 700 clamp(64px, 6.4vw, 104px)/.96 var(--font-display);
  --type-display-lg: 700 clamp(42px, 6vw, 78px)/1.1 var(--font-display);
  --type-heading-1: 700 clamp(34px, 5vw, 60px)/1.2 var(--font-display);
  --type-heading-2: 700 clamp(36px, 4.4vw, 56px)/1.12 var(--font-display);
  --type-heading-3: 600 36px/1.35 var(--font-display);
  --type-reading-title: 600 clamp(42px, 4.5vw, 62px)/1.2 var(--font-display);
  --type-prose: 600 18px/2 var(--font-display);
  --type-number-display: 600 clamp(52px, 5.6vw, 72px)/.9 var(--font-display);
  --type-number-compact: 600 26px/1 var(--font-display);
  --type-tracking: 0;
  --type-number-display-tracking: -.02em;
}

/* Keep the existing cover/home and reading breakpoints; do not couple them to theme specificity. */
@media (max-width: 760px) {
  :root {
    --type-display-xl: 700 clamp(43px, 12.4vw, 54px)/.98 var(--font-display);
    --type-display-lg: 700 42px/1.1 var(--font-display);
    --type-heading-2: 700 36px/1.12 var(--font-display);
    --type-number-display: 700 26px/1 var(--font-display);
    --type-number-display-tracking: 0;
    --type-number-compact: 600 24px/1 var(--font-display);
  }
}

@media (max-width: 680px) {
  :root {
    --type-heading-1: 700 34px/1.2 var(--font-display);
    --type-heading-3: 600 28px/1.35 var(--font-display);
    --type-reading-title: 600 clamp(34px, 10.5vw, 44px)/1.22 var(--font-display);
    --type-prose: 600 17px/1.95 var(--font-display);
  }
}

/* Functional roles are opt-in: preserve the validated default body/editorial/nav metrics. */
:root {
  --type-ui-body: 400 16px/1.8 var(--font-ui);
  --type-ui-body-small: 400 14px/1.7 var(--font-ui);
  --type-ui-meta: 400 13px/1.6 var(--font-ui);
  --type-ui-caption: 400 12px/1.5 var(--font-ui);
  --type-ui-label: 600 12px/1.4 var(--font-ui);
  --type-ui-button: 600 14px/1.4 var(--font-ui);
}

/* P4-1A theme foundation. New visual work uses --theme-*; legacy names are aliases only. */
:root,
:root[data-theme="dark"] {
  /* Keep the loaded Noto faces first; each fallback stays within its font family. */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "STSong", "SimSun", "Songti SC", serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-ui: var(--font-body);

  color-scheme: dark;
  --theme-bg-base: #030914;
  --theme-bg-secondary: #07101d;
  --theme-bg-gradient:
    radial-gradient(ellipse at 18% 12%, rgba(57, 66, 126, .13) 0%, rgba(57, 66, 126, .035) 34%, transparent 60%),
    radial-gradient(ellipse at 82% 68%, rgba(220, 184, 112, .055) 0%, rgba(220, 184, 112, .015) 30%, transparent 58%),
    linear-gradient(135deg, #030914 0%, #07172a 58%, #101827 100%);
  --theme-surface: rgba(8, 17, 31, .72);
  --theme-surface-soft: rgba(255, 255, 255, .055);
  --theme-surface-elevated: rgba(10, 22, 38, .92);
  --theme-surface-glass: rgba(8, 17, 31, .78);
  --theme-input: rgba(3, 9, 20, .58);
  --theme-overlay: rgba(1, 5, 12, .76);
  --theme-text-primary: #fff8ec;
  --theme-text-secondary: rgba(255, 248, 236, .78);
  --theme-text-muted: rgba(255, 248, 236, .68);
  --theme-text-on-accent: #201807;
  --theme-border-soft: rgba(255, 248, 236, .12);
  --theme-border-strong: rgba(255, 248, 236, .22);
  --theme-accent-coral: #d99091;
  --theme-accent-gold: #f0d486;
  --theme-accent-gold-bright: #ffe8a9;
  --theme-accent-gold-deep: #d69a36;
  --theme-accent-gold-soft: rgba(240, 212, 134, .28);
  --theme-accent-blue: #7ea4bf;
  --theme-success: #71c990;
  --theme-danger: #eb8492;
  --theme-shadow-soft: 0 18px 52px rgba(0, 5, 14, .24);
  --theme-shadow-elevated: 0 24px 72px rgba(0, 5, 14, .28);
  --theme-photo-shadow: 0 28px 76px rgba(0, 5, 14, .30);
  --theme-focus-ring: rgba(240, 212, 134, .34);
  --theme-scrollbar-thumb: rgba(240, 212, 134, .28);
  --theme-transition-duration: 560ms;
  --theme-transition-fast: 180ms;
  --motion-fast: 160ms;
  --motion-normal: 260ms;
  --motion-slow: 520ms;
  --motion-ambient: 32s;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-emphasized: cubic-bezier(.18, .82, .22, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ambient-warm: rgba(226, 184, 137, .105);
  --ambient-cool: rgba(91, 119, 170, .10);

  --bg: var(--theme-bg-base);
  --paper: var(--theme-surface-elevated);
  --ink: var(--theme-text-primary);
  --muted: var(--theme-text-muted);
  --line: var(--theme-border-soft);
  --rose: var(--theme-accent-coral);
  --coral: var(--theme-accent-coral);
  --mint: var(--theme-success);
  --shadow: var(--theme-shadow-elevated);

  --master-bg: var(--theme-bg-base);
  --master-panel: var(--theme-surface);
  --master-panel-strong: var(--theme-surface-elevated);
  --master-ink: var(--theme-text-primary);
  --master-muted: var(--theme-text-muted);
  --master-line: var(--theme-border-soft);
  --master-gold: var(--theme-accent-gold-bright);
  --master-gold-deep: var(--theme-accent-gold-deep);

  --planet-bg: var(--theme-bg-base);
  --planet-bg-soft: var(--theme-bg-secondary);
  --planet-panel: var(--theme-surface);
  --planet-panel-soft: var(--theme-surface-soft);
  --planet-line: var(--theme-border-soft);
  --planet-line-gold: var(--theme-accent-gold-soft);
  --planet-ink: var(--theme-text-primary);
  --planet-muted: var(--theme-text-muted);
  --planet-faint: var(--theme-text-muted);
  --planet-gold: var(--theme-accent-gold);
  --planet-gold-bright: var(--theme-accent-gold-bright);
  --planet-gold-deep: var(--theme-accent-gold-deep);
  --planet-shadow: var(--theme-shadow-elevated);

  --cosmic-gold: var(--theme-accent-gold);
  --cosmic-ink: var(--theme-text-primary);
  --cosmic-muted: var(--theme-text-muted);
  --cosmic-line: var(--theme-accent-gold-soft);
  --cosmic-panel: var(--theme-surface);
}

:root[data-theme="light"] {
  color-scheme: light;
  --theme-bg-base: #f8f5f0;
  --theme-bg-secondary: #eef3f6;
  --theme-bg-gradient:
    radial-gradient(ellipse at 11% 4%, rgba(218, 165, 124, .10) 0%, rgba(218, 165, 124, .035) 28%, transparent 54%),
    radial-gradient(ellipse at 91% 66%, rgba(110, 145, 168, .075) 0%, rgba(110, 145, 168, .025) 30%, transparent 58%),
    linear-gradient(145deg, #f8f5f0 0%, #f6f3ef 48%, #eef3f6 100%);
  --theme-surface: rgba(255, 255, 255, .82);
  --theme-surface-soft: #fff9f5;
  --theme-surface-elevated: rgba(255, 255, 255, .95);
  --theme-surface-glass: rgba(255, 252, 248, .78);
  --theme-input: rgba(255, 255, 255, .74);
  --theme-overlay: rgba(49, 54, 64, .34);
  --theme-text-primary: #25262b;
  --theme-text-secondary: #555b65;
  --theme-text-muted: #686f7a;
  --theme-text-on-accent: #fffaf5;
  --theme-border-soft: rgba(55, 61, 72, .12);
  --theme-border-strong: rgba(55, 61, 72, .21);
  --theme-accent-coral: #c9666f;
  --theme-accent-gold: #b2873d;
  --theme-accent-gold-bright: #9e742f;
  --theme-accent-gold-deep: #8c672d;
  --theme-accent-gold-soft: rgba(178, 135, 61, .24);
  --theme-accent-blue: #6e91a8;
  --theme-success: #3f9468;
  --theme-danger: #b94e5d;
  --theme-shadow-soft: 0 12px 34px rgba(58, 63, 72, .09);
  --theme-shadow-elevated: 0 20px 54px rgba(58, 63, 72, .12);
  --theme-photo-shadow: 0 22px 58px rgba(58, 63, 72, .15);
  --theme-focus-ring: rgba(201, 102, 111, .34);
  --theme-scrollbar-thumb: rgba(110, 119, 132, .34);
  --ambient-warm: rgba(229, 178, 135, .13);
  --ambient-cool: rgba(112, 151, 178, .105);
}

body[data-page="home"] {
  --cover-ink: var(--theme-text-primary);
  --cover-muted: var(--theme-text-muted);
  --cover-faint: var(--theme-border-strong);
  --cover-hairline: var(--theme-border-strong);
}

html,
body {
  background-color: var(--theme-bg-base);
}

body {
  color: var(--theme-text-primary);
  accent-color: var(--theme-accent-coral);
  scrollbar-color: var(--theme-scrollbar-thumb) transparent;
}

::selection {
  color: var(--theme-text-on-accent);
  background: var(--theme-accent-coral);
}

input,
textarea,
select {
  color: var(--theme-text-primary);
  caret-color: var(--theme-accent-coral);
}

input::placeholder,
textarea::placeholder {
  color: var(--theme-text-muted);
  opacity: .78;
}

:where(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--theme-focus-ring);
  outline-offset: 3px;
}

html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition-property: background-color, color, border-color, box-shadow, opacity;
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: var(--ease-standard);
}

html.theme-transitioning body {
  transition-duration: var(--theme-transition-duration);
}

html.theme-transitioning :where(main, section, .site-header, .mobile-tabbar, .player-v2-pill, .player-v2-playlist) {
  transition-duration: var(--motion-slow);
}

html.theme-transitioning :where(a, button, input, textarea, select, .stat-card, .love-milestone, .home-note-entry, .home-album-feature, .home-message-quote) {
  transition-duration: var(--motion-normal);
}

/* P4-1B ambient field: two broad layers on desktop, one static layer on compact screens. */
body > main[data-pjax-main]:not(:where(.footprint-map-page)) {
  position: relative;
  isolation: isolate;
}

body > main[data-pjax-main]:not(:where(.footprint-map-page)).is-pjax-leaving {
  opacity: .86;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

body > main[data-pjax-main]:not(:where(.footprint-map-page)).is-pjax-entering {
  animation: pjax-main-enter var(--motion-fast) var(--ease-standard) both;
}

@keyframes pjax-main-enter {
  from { opacity: .86; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

body > main[data-pjax-main]:not(:where(.footprint-map-page))::before,
body > main[data-pjax-main]:not(:where(.footprint-map-page))::after {
  content: "";
  position: absolute;
  inset: -5rem -4vw;
  z-index: -1;
  pointer-events: none;
  opacity: .72;
  transform-origin: 50% 24%;
}

body > main[data-pjax-main]:not(:where(.footprint-map-page))::before {
  background: radial-gradient(ellipse at 13% 9%, var(--ambient-warm) 0%, transparent 58%);
  animation: ambient-drift var(--motion-ambient) var(--ease-soft) infinite alternate;
}

body > main[data-pjax-main]:not(:where(.footprint-map-page))::after {
  background: radial-gradient(ellipse at 88% 57%, var(--ambient-cool) 0%, transparent 60%);
  opacity: .62;
}

@keyframes ambient-drift {
  from { transform: translate3d(-1%, -.5%, 0) scale(1.01); opacity: .62; }
  to { transform: translate3d(2%, 1%, 0) scale(1.025); opacity: .76; }
}

/* Native reveal groups; motion.js only marks existing DOM and owns the observer lifecycle. */
.motion-enabled [data-motion-reveal] {
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity 380ms var(--ease-emphasized) var(--motion-delay, 0ms),
    filter 320ms var(--ease-standard) var(--motion-delay, 0ms);
}

.motion-enabled [data-motion-reveal="lift"] {
  transform: translateY(14px);
  transition:
    opacity 380ms var(--ease-emphasized) var(--motion-delay, 0ms),
    transform 380ms var(--ease-emphasized) var(--motion-delay, 0ms),
    filter 320ms var(--ease-standard) var(--motion-delay, 0ms);
}

.motion-enabled [data-motion-reveal].is-motion-revealed {
  opacity: 1;
  filter: blur(0);
}

.motion-enabled [data-motion-reveal="lift"].is-motion-revealed {
  transform: translateY(0);
}

/* Restrained interaction motion shared by theme surfaces and controls. */
:where(.theme-toggle, .soft-link, .message-fab, .stat-card, .love-milestone, .home-note-entry, .home-album-feature, .home-message-quote) {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--motion-normal);
  transition-timing-function: var(--ease-standard);
}

.soft-link svg {
  transition: transform var(--motion-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  :where(.theme-toggle, .soft-link, .message-fab):hover {
    transform: translateY(-1px);
  }

  .soft-link:hover svg {
    transform: translateX(2px);
  }
}

.theme-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  overflow: hidden;
}

.theme-toggle .theme-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19px;
  height: 19px;
  transition: opacity var(--theme-transition-fast) ease, transform var(--theme-transition-fast) ease;
}

:root[data-theme="dark"] .theme-icon-sun,
:root:not([data-theme]) .theme-icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

:root[data-theme="dark"] .theme-icon-moon,
:root:not([data-theme]) .theme-icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-20deg) scale(.72);
}

:root[data-theme="light"] .theme-icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(20deg) scale(.72);
}

:root[data-theme="light"] .theme-icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* Light mode keeps the current layout while replacing the night material. */
:root[data-theme="light"] body,
:root[data-theme="light"] body:not([data-page="home"]),
:root[data-theme="light"] body[data-page="home"] {
  color: var(--theme-text-primary);
  background-color: var(--theme-bg-base);
  background-image: var(--theme-bg-gradient);
  background-attachment: scroll;
}

/* Map floating controls share the light surfaces; dark production styles stay in styles.css. */
:root[data-theme="light"] :is(.footprint-mode-bar, .footprint-status-pill, .footprint-exit-btn) {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-glass);
  box-shadow: var(--theme-shadow-soft);
}

:root[data-theme="light"] .footprint-status-divider {
  background: var(--theme-border-strong);
}

:root[data-theme="light"] .footprint-status-pill [data-footprint-distance] {
  color: var(--theme-accent-gold-deep);
}

:root[data-theme="light"] .footprint-avatar {
  border-color: var(--theme-accent-gold-soft);
  background: var(--theme-surface-soft);
}

:root[data-theme="light"] .footprint-mode-bar button:not(:disabled) {
  color: var(--theme-text-secondary);
}

:root[data-theme="light"] .footprint-mode-bar button:not(:disabled):is(:hover, :focus-visible) {
  color: var(--theme-text-primary);
  background: var(--theme-surface-soft);
}

:root[data-theme="light"] .footprint-mode-bar button.is-active:not(:disabled) {
  color: var(--theme-accent-gold-deep);
  background: var(--theme-accent-gold-soft);
  box-shadow: inset 0 0 0 1px var(--theme-accent-gold-soft);
}

:root[data-theme="light"] .footprint-mode-bar button:disabled {
  color: var(--theme-text-muted);
  opacity: .5;
}

:root[data-theme="light"] .footprint-mode-bar button:disabled.is-active {
  background: var(--theme-surface-soft);
  box-shadow: none;
}

:root[data-theme="light"] .footprint-exit-btn:hover {
  border-color: var(--theme-accent-gold-soft);
  background: var(--theme-surface-elevated);
}

:root[data-theme="light"] .footprint-exit-btn:active {
  color: var(--theme-accent-gold-deep);
  border-color: var(--theme-accent-gold);
  background: var(--theme-surface-soft);
}

:root[data-theme="light"] :is(.footprint-mode-bar button:not(:disabled), .footprint-exit-btn):focus-visible {
  outline: 3px solid var(--theme-focus-ring);
  outline-offset: 3px;
}

/* Message city marker uses the same light surfaces as the floating controls. */
:root[data-theme="light"] .map-marker-message {
  color: var(--theme-accent-gold-deep);
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-elevated);
  box-shadow: var(--theme-shadow-soft);
}

:root[data-theme="light"] .map-marker-message:is(:hover, :focus-visible) {
  border-color: var(--theme-accent-gold);
  background: var(--theme-surface-soft);
  box-shadow: var(--theme-shadow-soft);
}

:root[data-theme="light"] .map-marker-message:active {
  background: var(--theme-accent-gold-soft);
}

:root[data-theme="light"] .map-marker-message:focus-visible {
  outline: 3px solid var(--theme-focus-ring);
  outline-offset: 3px;
}

:root[data-theme="light"] .map-marker-message-count {
  color: var(--theme-text-on-accent);
  background: var(--theme-accent-gold-deep);
}

/* Shared map content cards, including the mobile message list. */
:root[data-theme="light"] :is(.map-info-card, .map-bottom-card) {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-elevated);
  box-shadow: var(--theme-shadow-soft);
}

:root[data-theme="light"] .map-info-arrow {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-elevated);
}

:root[data-theme="light"] :is(.map-info-card, .map-bottom-card) .map-info-type:is(.is-person, .is-content) {
  color: var(--theme-accent-gold-deep);
  background: var(--theme-accent-gold-soft);
}

:root[data-theme="light"] :is(.map-info-card, .map-bottom-card) .map-info-location {
  color: var(--theme-text-secondary);
}

:root[data-theme="light"] :is(.map-info-card, .map-bottom-card) .map-info-location-dot {
  background: var(--theme-accent-gold);
  box-shadow: none;
}

:root[data-theme="light"] :is(.map-info-card, .map-bottom-card) :is(.map-info-messages, .map-info-message + .map-info-message) {
  border-color: var(--theme-border-soft);
}

:root[data-theme="light"] :is(.map-info-card, .map-bottom-card) .map-info-message-head span {
  color: var(--theme-accent-gold-deep);
}

:root[data-theme="light"] :is(.map-info-card, .map-bottom-card) .map-info-message-head time {
  color: var(--theme-text-muted);
}

:root[data-theme="light"] :is(.map-info-card, .map-bottom-card) .map-info-message p {
  color: var(--theme-text-secondary);
}

:root[data-theme="light"] :is(.map-info-close, .map-bottom-card-close) {
  color: var(--theme-text-secondary);
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-soft);
}

:root[data-theme="light"] :is(.map-info-close, .map-bottom-card-close):is(:hover, :focus-visible) {
  color: var(--theme-accent-gold-deep);
  border-color: var(--theme-accent-gold-soft);
  background: var(--theme-accent-gold-soft);
}

:root[data-theme="light"] :is(.map-info-card, .map-bottom-card) .map-info-detail {
  color: var(--theme-accent-gold-deep);
}

:root[data-theme="light"] :is(.map-info-card, .map-bottom-card) .map-info-detail:is(:hover, :focus-visible) {
  color: var(--theme-accent-gold-bright);
}

:root[data-theme="light"] :is(.map-info-close, .map-bottom-card-close, .map-info-detail):focus-visible {
  outline: 3px solid var(--theme-focus-ring);
  outline-offset: 3px;
}

:root[data-theme="light"] .glass-header,
:root[data-theme="light"] .glass-header.solid,
:root[data-theme="light"] .glass-header.is-elevated {
  color: var(--theme-text-primary);
  border-color: rgba(178, 154, 121, .14);
  background: rgba(255, 252, 248, .94);
  box-shadow: 0 8px 24px rgba(58, 51, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .5);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] :is(.glass-header, .glass-header.solid, .glass-header.is-elevated) {
    background: var(--theme-surface-glass);
  }
}

:root[data-theme="light"] .glass-header .brand,
:root[data-theme="light"] .glass-header .brand span:last-child {
  color: var(--theme-text-primary);
}

:root[data-theme="light"] .brand-mark {
  border-color: rgba(178, 135, 61, .38);
  box-shadow: 0 9px 24px rgba(178, 135, 61, .18), inset 0 0 20px rgba(255, 255, 255, .18);
}

:root[data-theme="light"] .nav-island a {
  color: var(--theme-text-secondary);
}

:root[data-theme="light"] .nav-island a.active,
:root[data-theme="light"] .nav-island a:hover {
  color: var(--theme-accent-gold-deep);
}

:root[data-theme="light"] .pill-action,
:root[data-theme="light"] .icon-action,
:root[data-theme="light"] .front-auth-menu summary {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-soft);
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

:root[data-theme="light"] .pill-action:hover,
:root[data-theme="light"] .icon-action:hover,
:root[data-theme="light"] .front-auth-menu summary:hover,
:root[data-theme="light"] .front-auth-menu[open] summary {
  border-color: var(--theme-accent-gold-soft);
  background: rgba(178, 135, 61, .08);
}

:root[data-theme="light"] .front-auth-popover,
:root[data-theme="light"] .mobile-more-menu {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-soft);
  background: rgba(255, 252, 248, .96);
  box-shadow: var(--theme-shadow-elevated);
}

:root[data-theme="light"] .front-auth-popover a,
:root[data-theme="light"] .mobile-more-menu a,
:root[data-theme="light"] .mobile-more-menu > button:not(header button),
:root[data-theme="light"] .mobile-auth-section a {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-soft);
  background: rgba(255, 255, 255, .48);
}

:root[data-theme="light"] .front-auth-popover a:hover,
:root[data-theme="light"] .mobile-auth-section a:hover {
  color: var(--theme-accent-gold-deep);
  background: rgba(178, 135, 61, .08);
}

:root[data-theme="light"] .mobile-more-menu header,
:root[data-theme="light"] .mobile-more-menu a svg,
:root[data-theme="light"] .mobile-more-menu > button:not(header button) svg,
:root[data-theme="light"] .mobile-auth-status,
:root[data-theme="light"] .mobile-auth-section a svg {
  color: var(--theme-accent-gold-deep);
}

:root[data-theme="light"] .mobile-more-menu a small,
:root[data-theme="light"] .mobile-more-menu > button:not(header button) small,
:root[data-theme="light"] .mobile-auth-section a small {
  color: var(--theme-text-muted);
}

:root[data-theme="light"] .mobile-more-backdrop {
  background: rgba(63, 68, 77, .22);
}

:root[data-theme="light"] body[data-page="home"] .brand-orbit-dot {
  background: #c59a4e;
  box-shadow: 0 0 10px rgba(178, 135, 61, .52), 0 0 24px rgba(178, 135, 61, .18);
}

:root[data-theme="light"] body[data-page="home"] .home-overview,
:root[data-theme="light"] body[data-page="home"] .home-love-section,
:root[data-theme="light"] body[data-page="home"] .home-notes-section,
:root[data-theme="light"] body[data-page="home"] .album-preview,
:root[data-theme="light"] body[data-page="home"] .home-messages-section,
:root[data-theme="light"] body[data-page="home"] .row-title,
:root[data-theme="light"] body[data-page="home"] .row-title h2 {
  color: var(--theme-text-primary);
}

:root[data-theme="light"] body[data-page="home"] .stat-card strong {
  color: var(--theme-text-primary);
}

:root[data-theme="light"] body[data-page="home"] .stat-card span,
:root[data-theme="light"] body[data-page="home"] .stat-card small {
  color: var(--theme-text-muted);
}

:root[data-theme="light"] body[data-page="home"] .stat-card svg,
:root[data-theme="light"] body[data-page="home"] .soft-link {
  color: var(--theme-accent-gold-deep);
}

:root[data-theme="light"] .site-footer {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-soft);
  background: rgba(238, 243, 246, .68);
}

:root[data-theme="light"] .footer-slogan {
  color: var(--theme-text-primary);
}

:root[data-theme="light"] .footer-links,
:root[data-theme="light"] .footer-links a,
:root[data-theme="light"] .footer-links span,
:root[data-theme="light"] .gongan-link,
:root[data-theme="light"] .gongan-link span {
  color: var(--theme-text-muted);
}

:root[data-theme="light"] .message-fab {
  color: var(--theme-text-on-accent);
  border-color: rgba(157, 121, 59, .28);
  background: #a98248;
  box-shadow: 0 10px 26px rgba(91, 71, 39, .15);
}

:root[data-theme="light"] .message-sent-toast {
  width: max-content;
  max-width: calc(100vw - 32px);
  color: var(--theme-text-primary);
  border-color: var(--theme-border-soft);
  background: var(--theme-surface-glass);
  box-shadow: var(--theme-shadow-elevated);
}

:root[data-theme="light"] .message-composer-overlay {
  background: var(--theme-overlay);
}

:root[data-theme="light"] .message-composer {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-soft);
  background: rgba(255, 252, 248, .985);
  box-shadow: 0 20px 54px rgba(58, 63, 72, .12);
}

:root[data-theme="light"] .info-drawer {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-soft);
  background: rgba(255, 252, 248, .98);
  box-shadow: var(--theme-shadow-elevated);
}

:root[data-theme="light"] .message-composer input,
:root[data-theme="light"] .message-composer textarea,
:root[data-theme="light"] .info-grid div {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-soft);
  background: rgba(255, 255, 255, .42);
}

:root[data-theme="light"] .message-composer-close {
  color: var(--theme-text-secondary);
  background: transparent;
}

:root[data-theme="light"] .message-composer .compose-tabs {
  border-color: var(--theme-border-soft);
  background: transparent;
}

:root[data-theme="light"] .message-compose-hints span {
  color: var(--theme-text-muted);
  background: transparent;
}

:root[data-theme="light"] .message-composer .compose-tabs button,
:root[data-theme="light"] .message-mode-note,
:root[data-theme="light"] .message-privacy-note,
:root[data-theme="light"] .message-admin-identity small {
  color: var(--theme-text-muted);
}

:root[data-theme="light"] .message-composer .compose-tabs button.active,
:root[data-theme="light"] .message-composer .compose-tabs button:hover {
  color: var(--theme-text-primary);
  background: transparent;
}

:root[data-theme="light"] .message-composer .compose-tabs button.active::after {
  background: var(--theme-accent-gold);
}

:root[data-theme="light"] .message-composer-feedback {
  color: #9a5048;
  border-color: rgba(154, 80, 72, .22);
}

:root[data-theme="light"] .message-composer-cancel {
  color: var(--theme-text-secondary);
}

:root[data-theme="light"] .message-composer-close:hover,
:root[data-theme="light"] .message-composer-cancel:hover {
  color: var(--theme-text-primary);
  background: rgba(95, 112, 128, .06);
}

:root[data-theme="light"] .message-composer-actions {
  border-color: var(--theme-border-soft);
}

:root[data-theme="light"] .message-composer-actions .message-blessing-button {
  color: var(--theme-accent-gold);
  border-color: var(--theme-accent-gold-soft);
  background: transparent;
}

/* Basic public-page surfaces inherit the new tokens without changing layout. */
:root[data-theme="light"] :where(
  .day-card,
  .compact-list a,
  .empty-state,
  .article-detail-not-found
) {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-soft);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-soft);
}

:root[data-theme="light"] .article-detail-not-found h1 {
  color: var(--theme-text-primary);
}

:root[data-theme="light"] .album-detail-copy > .article-detail-back {
  color: rgba(255, 248, 236, .78);
}

:root[data-theme="light"] .album-detail-copy > .article-detail-back:is(:hover, :focus-visible) {
  color: var(--theme-accent-gold);
}

:root[data-theme="light"] .message-meta-line,
:root[data-theme="light"] .article-detail-back,
:root[data-theme="light"] .album-private-back,
:root[data-theme="light"] .article-detail-not-found p {
  color: var(--theme-text-muted);
}

@media (max-width: 680px) {
  :root {
    --mobile-nav-bottom: calc(10px + env(safe-area-inset-bottom));
    --mobile-overlay-safe-space: calc(172px + env(safe-area-inset-bottom));
  }

  body :where(main [id]) {
    scroll-margin-top: calc(84px + env(safe-area-inset-top));
  }

  .header-actions .icon-action,
  body[data-page="home"] .header-actions .icon-action,
  .theme-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .header-actions .desktop-admin-entry.icon-action,
  body[data-page="home"] .header-actions .desktop-admin-entry.icon-action {
    display: none;
  }

  .scroll-top {
    right: 14px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
  }

  :root[data-theme="light"] .scroll-top {
    color: var(--theme-accent-gold-deep);
    border-color: var(--theme-accent-gold-soft);
    background: rgba(255, 252, 248, .94);
    box-shadow: 0 10px 26px rgba(58, 63, 72, .14), inset 0 1px 0 rgba(255, 255, 255, .82);
  }

  body[data-page="home"] .stat-card {
    align-content: center;
    justify-items: center;
    text-align: center;
  }

  .mobile-tabbar {
    bottom: var(--mobile-nav-bottom);
  }

  .mobile-tabbar a,
  .mobile-tabbar button {
    transition: color var(--motion-fast) var(--ease-standard),
      box-shadow var(--motion-fast) var(--ease-standard);
  }

  :root[data-theme="light"] .mobile-tabbar {
    border-color: var(--theme-border-soft);
    background: rgba(255, 252, 248, .92);
    box-shadow: 0 14px 34px rgba(58, 63, 72, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
  }

  :root[data-theme="light"] .mobile-tabbar a,
  :root[data-theme="light"] .mobile-tabbar button {
    color: var(--theme-text-muted);
  }

  :root[data-theme="light"] .mobile-tabbar a.active,
  :root[data-theme="light"] .mobile-tabbar button.active {
    color: var(--theme-text-on-accent);
    background: linear-gradient(135deg, #c99173, var(--theme-accent-coral));
    box-shadow: 0 8px 20px rgba(201, 102, 111, .17);
  }

  body > main[data-pjax-main]:not(:where(.footprint-map-page))::before {
    inset: -2rem -10vw;
    opacity: .52;
    animation: none;
  }

  body > main[data-pjax-main]:not(:where(.footprint-map-page))::after {
    display: none;
  }

  body[data-page="home"] .lover-avatar.is-online::before {
    animation: none;
  }

  .motion-enabled [data-motion-reveal="lift"] {
    transform: translateY(8px);
  }


  .motion-enabled [data-motion-reveal] {
    filter: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition-duration: 120ms;
    --theme-transition-fast: 120ms;
    --motion-fast: 120ms;
    --motion-normal: 120ms;
    --motion-slow: 120ms;
  }

  body > main[data-pjax-main]:not(:where(.footprint-map-page)).is-pjax-leaving {
    opacity: 1;
    transition: none;
  }

  body > main[data-pjax-main]:not(:where(.footprint-map-page)).is-pjax-entering {
    animation: none;
  }

  .nav-island a,
  .nav-island a::after,
  .mobile-tabbar a,
  .mobile-tabbar button {
    transition: none;
  }

  body > main[data-pjax-main]:not(:where(.footprint-map-page))::before,
  body > main[data-pjax-main]:not(:where(.footprint-map-page))::after,
  body[data-page="home"] .brand-orbit-dot {
    animation: none;
  }

  .motion-enabled [data-motion-reveal],
  .motion-enabled [data-motion-reveal].is-motion-revealed {
    opacity: 1;
    filter: none;
    transition: opacity 120ms linear;
  }

  .motion-enabled [data-motion-reveal="lift"],
  .motion-enabled [data-motion-reveal="lift"].is-motion-revealed {
    transform: none;
  }

  :where(.theme-toggle, .soft-link, .message-fab, .message-page-action, .stat-card, .love-milestone, .home-note-entry, .home-album-feature, .home-message-quote):hover,
  .soft-link:hover svg {
    transform: none;
  }

  .message-composer-overlay,
  .message-composer,
  .message-composer button {
    transition: none;
  }
}

/* Keep the persistent PJAX shell available for returning from the full-screen map. */
body[data-page="footprint-map"] :is(.glass-header, .mobile-tabbar, .mobile-more-menu, .mobile-more-backdrop, .site-footer, .message-fab, [data-message-overlay], .scroll-top) {
  display: none;
}