/* Dawn / dusk twilight variants — production chrome modifiers + design lab frames. */

/* --- Shared twilight surface tokens (dawn = cool lift, dusk = warm glow) --- */

.ao-twilight-dawn--cool.ao-header-ambient,
.ao-twilight-dawn--cool.ao-site-header {
  --ao-header-surface: linear-gradient(180deg, #f8fafc 0%, #f4f0ea 100%);
  --ao-header-live-bg: #f6f9fc;
  --ao-gossip-bleed-top: #f6f9fc;
  --ao-gossip-bleed-mid: #f2f6fb;
  --ao-gossip-bleed-bottom: #f7f2ea;
  --ao-gossip-border-top: rgba(140, 168, 208, 0.45);
  --ao-gossip-border-bottom: rgba(192, 152, 64, 0.35);
}

.ao-twilight-dusk--deep.ao-header-ambient,
.ao-twilight-dusk--deep.ao-site-header {
  --ao-header-surface: linear-gradient(180deg, #faf4ea 0%, #f2e4cc 100%);
  --ao-header-live-bg: #faf0e0;
  --ao-gossip-bleed-top: #faf4ea;
  --ao-gossip-bleed-mid: #f5ead8;
  --ao-gossip-bleed-bottom: #edd9bc;
  --ao-gossip-border-top: rgba(218, 178, 93, 0.55);
  --ao-gossip-border-bottom: #8a7040;
}

/* --- Dusk identity/ambient backgrounds: header-dusk-backgrounds.css --- */

/* --- Dawn: cool horizon (tokens; background in header-dawn-backgrounds.css) --- */
.ao-twilight-dawn--cool.ao-header-ambient,
.ao-twilight-dawn--cool.ao-site-header {
  --ao-phase-gold-soft: rgba(224, 188, 104, 0.16);
  --ao-phase-gold-muted: rgba(192, 152, 64, 0.38);
}

/* --- Dawn: soft lift --- */

.ao-twilight-dawn--soft.ao-header-ambient,
.ao-twilight-dawn--soft.ao-site-header {
  --ao-phase-gold-soft: rgba(218, 178, 93, 0.18);
  --ao-gossip-bleed-mid: #faf6ee;
}

.ao-twilight-dawn--soft.ao-site-header .ao-header-identity {
  filter: brightness(1.05) saturate(0.96);
}

.ao-twilight-dawn--soft.ao-site-header[class*="ao-time-phase-"] .ao-icon-board {
  border-color: #a88848;
  box-shadow: 0 1px 4px rgba(150, 125, 77, 0.35);
}

.ao-twilight-dawn--soft.ao-site-header .ao-header-identity::after,
.ao-twilight-dawn--soft.ao-header-ambient .ao-site-header .ao-header-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(176, 200, 232, 0.12) 0%,
    transparent 38%
  );
}

.ao-twilight-dawn--soft.ao-header-ambient::before {
  opacity: 0.55;
}

/* --- Dusk: deeper amber (tokens + moon labels; bg in header-dusk-backgrounds.css) --- */

.ao-twilight-dusk--deep.ao-site-header .ao-moon-phase-name,
.ao-site-header[class*="ao-dusk-bg--"] .ao-moon-phase-name {
  color: #241408;
}

.ao-twilight-dusk--deep.ao-site-header .ao-moon-phase-shape,
.ao-site-header[class*="ao-dusk-bg--"] .ao-moon-phase-shape {
  color: #322010;
}

.ao-twilight-dusk--deep.ao-site-header .ao-moon-phase-trend-label--waxing,
.ao-site-header[class*="ao-dusk-bg--"] .ao-moon-phase-trend-label--waxing {
  color: #6a5010;
}

.ao-twilight-dusk--deep.ao-site-header .ao-moon-phase-trend-label--waning,
.ao-site-header[class*="ao-dusk-bg--"] .ao-moon-phase-trend-label--waning {
  color: #4a3828;
}

.ao-twilight-dusk--deep.ao-site-header .ao-moon-phase-value,
.ao-site-header[class*="ao-dusk-bg--"] .ao-moon-phase-value {
  color: #3a2818;
}

/* --- Dusk: soft glow --- */

.ao-twilight-dusk--soft.ao-site-header .ao-header-identity::after,
.ao-twilight-dusk--soft.ao-header-ambient .ao-site-header .ao-header-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    270deg,
    rgba(212, 168, 96, 0.14) 0%,
    transparent 42%
  );
}

.ao-twilight-dusk--soft.ao-header-ambient::before {
  opacity: 0.45;
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, var(--ao-phase-gold-soft) 0%, transparent 68%),
    linear-gradient(180deg, transparent 0%, rgba(150, 125, 77, 0.28) 100%);
}

.ao-twilight-dusk--soft.ao-header-ambient {
  --ao-gossip-bleed-top: #fcfaf4;
  --ao-gossip-bleed-mid: #f9f4ea;
  --ao-gossip-bleed-bottom: #f2f6fb;
  --ao-gossip-border-top: rgba(218, 178, 93, 0.55);
  --ao-gossip-border-bottom: rgba(150, 125, 77, 0.35);
}

.ao-twilight-dusk--soft.ao-header-ambient .ao-gossip-highlights {
  background: linear-gradient(
    180deg,
    var(--ao-gossip-bleed-top) 0%,
    var(--ao-gossip-bleed-mid) 50%,
    var(--ao-gossip-bleed-bottom) 100%
  );
}