:root {
  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  --bg: #f7f3ea;
  --bg-soft: #fbf7ef;
  --surface: #fffdf8;
  --surface-muted: #f0eadf;

  --text: #202624;
  --text-soft: #3f4945;
  --muted: #69716d;
  --line: rgba(32, 38, 36, 0.12);

  --brand: #5f5472;
  --brand-dark: #443b53;
  --brand-soft: #e7e0ee;

  --accent: #b9856f;
  --accent-dark: #8f604f;
  --accent-soft: #f1ddd3;

  --sage: #8fa99b;
  --sage-dark: #637d70;
  --sage-soft: #e4ede7;

  --element-wood: #8fa99b;
  --element-fire: #b9856f;
  --element-earth: #d8c6a3;
  --element-metal: #a8aaa3;
  --element-water: #7d96a6;

  --warning-soft: #f3dfb8;
  --success-soft: #dfeadc;
  --focus-ring: rgba(95, 84, 114, 0.28);

  --primary-purple-dark: var(--brand-dark);
  --primary-purple: var(--brand);
  --primary-purple-light: #92869f;
  --primary-purple-lighter: var(--brand-soft);
  --primary-purple-blue-dark: var(--brand-dark);
  --primary-purple-blue: var(--brand);
  --primary-purple-blue-light: #92869f;
  --primary-purple-blue-lighter: var(--brand-soft);
  --primary-decision-dark: var(--brand-dark);
  --primary-decision: var(--brand);
  --primary-decision-light: #92869f;
  --primary-decision-lighter: var(--brand-soft);
  --primary-daily-dark: var(--brand-dark);
  --primary-daily: var(--brand);
  --primary-daily-light: #92869f;
  --primary-daily-lighter: var(--brand-soft);
  --rose-gold-dark: var(--accent-dark);
  --rose-gold: var(--accent);
  --rose-gold-light: var(--accent-soft);
  --rose-gold-lighter: #f6e9e2;
  --bg-gradient-start: var(--bg);
  --bg-gradient-end: var(--bg-soft);
  --cream: var(--bg-soft);
  --offwhite: var(--surface-muted);
  --white: var(--surface);
  --porcelain-white: var(--surface);
  --porcelain-offwhite: var(--surface-muted);
  --porcelain-cream: var(--bg-soft);
  --qinghua-blue-dark: var(--brand-dark);
  --qinghua-blue: var(--brand);
  --qinghua-blue-light: #92869f;
  --qinghua-blue-lighter: var(--brand-soft);
  --gold: var(--accent);
  --gold-light: var(--accent-soft);
  --text-dark: var(--text);
  --text-medium: var(--text-soft);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-light: var(--muted);
  --ink-black: var(--text);
  --ink-dark: var(--text-soft);
  --ink-gray: var(--muted);
  --accent-blue: var(--brand);
  --accent-gold: var(--accent);
}

* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  background: var(--bg);
}

body {
  font-family: var(--font-body) !important;
  color: var(--text) !important;
  background:
    radial-gradient(circle at top left, rgba(143, 169, 155, 0.22), transparent 32rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%) !important;
}

h1,
h2,
h3,
.hero-title,
.page-header h1,
.tools-header-title,
.section h2 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text) !important;
}

p,
li,
label,
input,
select,
textarea,
button {
  font-family: var(--font-body);
}

.container,
.tools-wrapper {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(32, 38, 36, 0.12) !important;
}

.header,
.tools-header,
body > .container > header {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(185, 133, 111, 0.22), transparent 18rem),
    linear-gradient(135deg, var(--surface) 0%, var(--bg-soft) 58%, var(--sage-soft) 100%) !important;
  border-bottom: 1px solid var(--line);
}

.header *,
.tools-header *,
body > .container > header * {
  color: inherit;
}

.header p,
.header li,
.tools-header-subtitle,
.page-header p,
.section-subtitle,
.section-note,
.plan-description,
.tool-desc,
.sidebar-note {
  color: var(--muted) !important;
}

.hero-badge,
.tools-header-badge,
.hero-chip,
.tool-tag,
.tool-chip,
.daily-card-tag,
.result-overall,
.priority-link-kicker {
  background: var(--sage-soft) !important;
  color: var(--sage-dark) !important;
  border-color: rgba(99, 125, 112, 0.2) !important;
}

.cta-button,
.submit-btn,
.question-submit-btn,
.popular-btn,
.checkout-btn,
button[type="submit"] {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
  color: #fffdf8 !important;
  border: none !important;
  box-shadow: 0 14px 34px rgba(95, 84, 114, 0.24) !important;
}

.cta-button:hover,
.submit-btn:hover,
.question-submit-btn:hover,
.popular-btn:hover,
.checkout-btn:hover,
button[type="submit"]:hover {
  box-shadow: 0 18px 42px rgba(95, 84, 114, 0.3) !important;
}

.secondary-btn,
.example-btn,
.tab-btn,
.category-btn,
.result-tab {
  background: var(--surface) !important;
  color: var(--brand-dark) !important;
  border-color: var(--line) !important;
}

.tab-btn.active,
.category-btn.is-active,
.result-tab.is-active {
  background: var(--brand-soft) !important;
  color: var(--brand-dark) !important;
  border-color: rgba(95, 84, 114, 0.22) !important;
}

.section,
.pricing-card,
.tool-card,
.priority-link-card,
.tools-priority-card,
.result-card,
.result-panel,
.info-card,
.testimonial-card,
.scenario-card,
.faq-item,
.form-card,
.hero-result-panel,
.hero-visual-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: 0 14px 38px rgba(32, 38, 36, 0.08) !important;
}

.pricing-card.popular,
.pricing-card.premium,
.priority-link-card:hover,
.tool-card:hover {
  border-color: rgba(95, 84, 114, 0.26) !important;
  box-shadow: 0 18px 48px rgba(32, 38, 36, 0.12) !important;
}

input,
select,
textarea {
  background: #fffefb !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

a {
  color: var(--brand-dark);
}

a:hover {
  color: var(--accent-dark);
}

.section-divider {
  background: var(--line) !important;
}

.tools-sidebar {
  background: var(--bg-soft) !important;
  border-color: var(--line) !important;
}

.result-loading-spinner,
.spinner {
  border-top-color: var(--brand) !important;
}

@media (max-width: 768px) {
  body {
    background: var(--bg) !important;
  }

  .header,
  .tools-header,
  body > .container > header {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%) !important;
  }
}