/* Ziwei "Traditional Ink / Parchment" skin (light)
   - Strictly scoped to `.ziwei-skin-light` to avoid affecting other panels.
   - Mirrors the provided `code.html` palette and typography intent.
*/

.ziwei-skin-light {
  --ziwei-parchment: #f4efe1;
  --ziwei-ink: #2d2a26;
  --ziwei-ink-soft: rgba(45, 42, 38, 0.6);
  --ziwei-ink-faint: rgba(45, 42, 38, 0.35);
  --ziwei-ink-red: #9e2a2b;
  --ziwei-border-gold: #b08d57;
  --ziwei-frame: rgba(45, 42, 38, 0.18);
}

/* Typography scopes */
.ziwei-skin-light .font-body {
  font-family: "Noto Serif SC", "Noto Serif KR", serif;
}
.ziwei-skin-light .font-display {
  /* Ma Shan Zheng has limited Hangul coverage; keep KR/SC fallbacks. */
  font-family: "Ma Shan Zheng", "Noto Serif KR", "Noto Serif SC", cursive;
}
.ziwei-skin-light .font-brush {
  /* Zhi Mang Xing also has limited Hangul coverage; keep KR/SC fallbacks. */
  font-family: "Zhi Mang Xing", "Noto Serif KR", "Noto Serif SC", cursive;
}

/* Tailwind-like helpers used by markup */
.ziwei-skin-light .bg-parchment {
  background-color: var(--ziwei-parchment);
}
.ziwei-skin-light .bg-parchment\/70 {
  background-color: rgba(244, 239, 225, 0.7);
}
.ziwei-skin-light .bg-parchment\/60 {
  background-color: rgba(244, 239, 225, 0.6);
}
.ziwei-skin-light .bg-ink-charcoal {
  background-color: var(--ziwei-ink);
}
.ziwei-skin-light .text-parchment {
  color: var(--ziwei-parchment);
}
.ziwei-skin-light .bg-ink-charcoal\/10 {
  background-color: rgba(45, 42, 38, 0.1);
}
.ziwei-skin-light .text-ink-charcoal {
  color: var(--ziwei-ink);
}
.ziwei-skin-light .text-ink-charcoal\/60 {
  color: var(--ziwei-ink-soft);
}
.ziwei-skin-light .text-ink-charcoal\/40 {
  color: var(--ziwei-ink-faint);
}
.ziwei-skin-light .text-ink-red {
  color: var(--ziwei-ink-red);
}
.ziwei-skin-light .bg-ink-red {
  background-color: var(--ziwei-ink-red);
}
.ziwei-skin-light .text-border-gold {
  color: var(--ziwei-border-gold);
}
.ziwei-skin-light .bg-border-gold {
  background-color: var(--ziwei-border-gold);
}
.ziwei-skin-light .border-ink-charcoal\/20 {
  border-color: rgba(45, 42, 38, 0.2);
}
.ziwei-skin-light .border-border-gold {
  border-color: var(--ziwei-border-gold);
}
.ziwei-skin-light .border-ink-red {
  border-color: var(--ziwei-ink-red);
}
.ziwei-skin-light .ring-border-gold {
  --tw-ring-color: rgba(176, 141, 87, 0.55);
}
.ziwei-skin-light .ring-ink-red {
  --tw-ring-color: rgba(158, 42, 43, 0.6);
}

/* Decorative texture + cloud pattern (localized assets) */
.ziwei-skin-light .parchment-texture {
  background-image: url("./ziwei.light.parchment.jpg");
  background-size: cover;
  background-position: center;
}
.ziwei-skin-light .cloud-pattern {
  background-image: url("./ziwei.light.cloud.png");
  background-size: cover;
  background-position: center;
}

/* Light orange wash used in the reference "Palace Details" header (reused for Life Palace header highlight) */
.ziwei-skin-light .light-orange-wash {
  background: linear-gradient(
    180deg,
    rgba(240, 170, 108, 0.055) 0%,
    rgba(244, 239, 225, 0.0) 18%
  );
}

/* Header variant: orange wash + subtle parchment texture */
.ziwei-skin-light .parchment-header-wash {
  background-image:
    linear-gradient(
      180deg,
      rgba(240, 170, 108, 0.055) 0%,
      rgba(244, 239, 225, 0.0) 18%
    ),
    url("./ziwei.light.parchment.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}

/* Panel header variant: thinner + lighter than palace header wash */
.ziwei-skin-light .parchment-panel-header-wash {
  background-image:
    linear-gradient(
      180deg,
      rgba(240, 170, 108, 0.04) 0%,
      rgba(244, 239, 225, 0.0) 85%
    ),
    url("./ziwei.light.parchment.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}

/* Mobile: slightly stronger wash so it remains visible on Chrome/Edge mobile UI */
@media (max-width: 520px) {
  .ziwei-skin-light .parchment-header-wash {
    background-image:
      linear-gradient(
        180deg,
        rgba(240, 170, 108, 0.12) 0%,
        rgba(240, 170, 108, 0.04) 55%,
        rgba(244, 239, 225, 0.0) 100%
      ),
      url("./ziwei.light.parchment.jpg");
  }

  .ziwei-skin-light .parchment-panel-header-wash {
    background-image:
      linear-gradient(
        180deg,
        rgba(240, 170, 108, 0.06) 0%,
        rgba(240, 170, 108, 0.02) 55%,
        rgba(244, 239, 225, 0.0) 100%
      ),
      url("./ziwei.light.parchment.jpg");
  }
}

/* Subtle divider line */
.ziwei-skin-light .light-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(176, 141, 87, 0.55),
    transparent
  );
}

/* Ink-frame helper (for cards/panels) */
.ziwei-skin-light .ink-frame {
  border: 1px solid rgba(45, 42, 38, 0.22);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.18);
  background: rgba(244, 239, 225, 0.92);
}