/*
 * Shared client visual language.
 * Derived from the six-view reference images: warm paper, ink, bronze and sage.
 * This file intentionally contains presentation only; page behavior stays local.
 */
:root {
  --client-paper: #f4efe6;
  --client-paper-deep: #ebe3d5;
  --client-surface: #fffdf8;
  --client-surface-muted: #f7f2e8;
  --client-ink: #332e28;
  --client-ink-soft: #6e665c;
  --client-ink-faint: #9a9185;
  --client-line: rgba(91, 78, 61, 0.16);
  --client-bronze: #b57a3f;
  --client-bronze-dark: #8c5a2b;
  --client-bronze-soft: #ead8bd;
  --client-sage: #71836a;
  --client-sage-soft: #dfe7da;
  --client-aqua: #6faeaa;
  --client-danger: #a5524c;
  --client-shadow: 0 12px 30px rgba(63, 52, 39, 0.09);
  --client-shadow-soft: 0 5px 16px rgba(63, 52, 39, 0.07);
}

html[data-theme="dark"] {
  --client-paper: #1c1814;
  --client-paper-deep: #28231e;
  --client-surface: #28231e;
  --client-surface-muted: #322c26;
  --client-ink: #ede4d8;
  --client-ink-soft: #c2b4a2;
  --client-ink-faint: #958979;
  --client-line: rgba(237, 228, 216, 0.16);
  --client-bronze: #d3a66a;
  --client-bronze-dark: #ebc48b;
  --client-bronze-soft: #493a2b;
  --client-sage: #aebda3;
  --client-sage-soft: #333c31;
  --client-aqua: #8dc7c2;
  --client-danger: #df8d85;
  --client-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  --client-shadow-soft: 0 5px 16px rgba(0, 0, 0, 0.22);
}

html {
  background: var(--client-paper);
  color-scheme: light;
}

body {
  background-color: var(--client-paper) !important;
  color: var(--client-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body > .w-screen,
body > .min-h-screen,
body > main,
.content-wrapper {
  background-color: var(--client-paper) !important;
}

h1,
h2,
.cute-font {
  color: var(--client-ink) !important;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
}

a,
button,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a,
button {
  transition: transform 160ms ease, opacity 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

a:active,
button:active {
  transform: scale(0.98);
}

input,
textarea {
  background-color: var(--client-surface-muted) !important;
  border: 1px solid var(--client-line) !important;
  color: var(--client-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

input::placeholder,
textarea::placeholder {
  color: var(--client-ink-faint) !important;
}

input:focus,
textarea:focus {
  border-color: rgba(181, 122, 63, 0.56) !important;
  box-shadow: 0 0 0 3px rgba(181, 122, 63, 0.11) !important;
}

/* Paper cards and sheets */
.bg-white,
.bg-white\/70,
.bg-white\/80,
.bg-white\/90,
.form-card,
.policy-card,
.agreement-card,
.share-card {
  background-color: var(--client-surface) !important;
}

.shadow-sm,
.shadow-md,
.soft-shadow {
  box-shadow: var(--client-shadow-soft) !important;
}

.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: var(--client-shadow) !important;
}

.rounded-3xl,
.rounded-\[2rem\] {
  border-radius: 1.25rem !important;
}

.rounded-2xl,
.rounded-\[1\.5rem\] {
  border-radius: 0.9rem !important;
}

/* Ink text replaces the former candy-pink hierarchy. */
.text-pink-700,
.text-pink-600,
.text-pink-500,
.text-slate-800,
.text-slate-700,
.text-gray-800,
.text-gray-700 {
  color: var(--client-ink) !important;
}

.text-pink-400,
.text-orange-400,
.text-purple-400,
.text-blue-400 {
  color: var(--client-bronze) !important;
}

.text-pink-300,
.text-pink-200,
.text-slate-500,
.text-slate-400,
.text-gray-500 {
  color: var(--client-ink-soft) !important;
}

.text-pink-100,
.text-gray-400 {
  color: var(--client-ink-faint) !important;
}

/* Bronze primary action, sage secondary action. */
.bg-pink-500,
.bg-pink-400,
.bg-pink-300 {
  background-color: var(--client-bronze) !important;
}

.bg-pink-200 {
  background-color: var(--client-sage-soft) !important;
}

.bg-pink-100,
.bg-pink-50,
.bg-pink-50\/70,
.bg-orange-100,
.bg-purple-100,
.bg-blue-100 {
  background-color: var(--client-surface-muted) !important;
}

.hover\:bg-pink-500:hover,
.hover\:bg-pink-400:hover,
.hover\:bg-pink-300:hover {
  background-color: var(--client-bronze-dark) !important;
}

.hover\:bg-pink-200:hover,
.hover\:bg-pink-100:hover {
  background-color: var(--client-paper-deep) !important;
}

.border-pink-50,
.border-pink-100,
.border-pink-200,
.border-gray-100 {
  border-color: var(--client-line) !important;
}

.accent-pink-300 {
  accent-color: var(--client-bronze) !important;
}

.tab-btn.active {
  color: var(--client-bronze) !important;
  border-color: var(--client-bronze) !important;
}

/* Shared top bars feel like a quiet title plate instead of a pink toolbar. */
.pt-12.pb-4,
header.pt-12,
header.pt-4 {
  background-color: rgba(244, 239, 230, 0.94) !important;
  border-bottom: 1px solid var(--client-line);
}

.pt-12.pb-4 h1,
header h1,
header .text-lg,
header .text-xl {
  color: var(--client-ink) !important;
  font-family: "Songti SC", "STSong", serif;
  letter-spacing: 0.08em;
}

/* Existing list cards gain the thin bronze-edged paper treatment from the mocks. */
.space-y-3 > a,
.space-y-4 > .bg-white,
.space-y-4 > a.bg-white,
.policy-card,
.agreement-card,
.form-card,
.share-card {
  border: 1px solid var(--client-line) !important;
}

.space-y-3 > a .w-10.h-10,
.space-y-4 > a .w-10.h-10 {
  color: var(--client-bronze) !important;
  border: 1px solid rgba(181, 122, 63, 0.18);
}

/* Destructive actions stay semantic but lose the saturated candy treatment. */
.bg-rose-500,
.bg-rose-400 {
  background-color: var(--client-danger) !important;
}

.bg-rose-200,
.bg-rose-100 {
  background-color: #f1e0dd !important;
}

.text-rose-500,
.text-rose-400 {
  color: var(--client-danger) !important;
}

/* Modal dimmers */
.bg-pink-900\/18,
.bg-pink-900\/22 {
  background-color: rgba(40, 34, 28, 0.34) !important;
}

/* Legal and policy pages */
.policy-card,
.agreement-card {
  color: var(--client-ink-soft) !important;
  line-height: 1.9;
}

.policy-card h2,
.policy-card h3,
.agreement-card h2,
.agreement-card h3 {
  color: var(--client-bronze-dark) !important;
  font-family: "Songti SC", "STSong", serif;
}

/* Existing bottom navigation */
.main-nav {
  background-color: rgba(255, 253, 248, 0.96) !important;
  border-top: 1px solid var(--client-line) !important;
  box-shadow: 0 -8px 24px rgba(63, 52, 39, 0.05) !important;
}

.main-nav-link {
  color: var(--client-ink-faint) !important;
}

.main-nav-link.active {
  color: var(--client-bronze) !important;
  background-color: var(--client-surface-muted) !important;
  background-image: none !important;
  box-shadow: var(--client-shadow-soft) !important;
}

.main-nav-icon-wrap {
  background-color: transparent !important;
}

.main-nav-link.active .main-nav-icon-wrap {
  background-color: var(--client-surface) !important;
  background-image: none !important;
  border-color: rgba(181, 122, 63, 0.24) !important;
  box-shadow: none !important;
}

/* Settings controls */
.toggle-switch.active,
.volume-slider::-webkit-slider-thumb {
  background-color: var(--client-bronze) !important;
}

.volume-slider {
  accent-color: var(--client-bronze);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}