:root {
  /* Elegant light theme palette */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f7f9;
  --color-text: #1f2937;       /* gray-800 */
  --color-heading: #111827;    /* gray-900 */
  --color-muted: #6b7280;      /* gray-600 */

  /* Primary (muted rose) */
  --color-primary: #c84c74;
  --color-primary-600: #b23f66;
  --color-primary-700: #9d3558;
  --color-primary-300: #e3a5bb;
  --color-primary-100: #f8e9ef;
  --color-primary-50: #fcf5f8;

  /* UI tokens */
  --color-border: #e5e7eb;
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.12);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

body { color: var(--color-text); background: var(--color-bg); }

/* Header */
.nav-brand h1, .nav-brand a { color: var(--color-primary); }
.nav-brand p { color: var(--color-muted); }
.nav-menu a { color: var(--color-text); border-radius: var(--radius-sm); }
.nav-menu a:hover, .nav-menu a.active { background: var(--color-primary-50); color: var(--color-primary-700); }
.nav-toggle span { background: var(--color-text); }
.skip-link { background: var(--color-primary); }

/* Hero */
.hero { background: linear-gradient(135deg, var(--color-primary-50) 0%, #faf7f9 100%); }
.hero-content h1 { color: var(--color-heading); }
.hero-subtitle { color: var(--color-muted); }

/* Buttons */
.btn { border-radius: var(--radius-md); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--color-primary-700); box-shadow: var(--shadow-lg); }
.btn-secondary { background: #fff; color: var(--color-primary); border: 1.5px solid var(--color-primary-300); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); }

/* Cards & sections */
.checklist-preview { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.popular-lists { background: var(--color-surface-alt); }
.popular-lists h2 { color: var(--color-heading); }
.list-card { border-radius: var(--radius-lg); }
.list-card.featured { border: 2px solid var(--color-primary-300); background: linear-gradient(135deg, var(--color-primary-50) 0%, #fff 100%); }
.list-card h3 { color: var(--color-heading); }
.list-card p { color: var(--color-muted); }
.card-link { color: var(--color-primary); }
.card-link:hover { color: var(--color-primary-700); }

/* Tips */
.quick-tips h2 { color: var(--color-heading); }
.tip-item h3 { color: var(--color-heading); }
.tip-item p { color: var(--color-muted); }

/* CTA */
.cta-section { background: var(--color-primary-50); color: var(--color-text); }
.cta-section .btn-primary { background: var(--color-primary); color: #fff; }
.cta-section .btn-primary:hover { background: var(--color-primary-700); }

/* Footer */
footer .footer-section h3 { color: var(--color-primary); }
footer .footer-section ul li a:hover { color: var(--color-primary); }

/* States & focus */
.loading::after { border-top: 2px solid var(--color-primary) !important; }
.btn:focus, select:focus, textarea:focus, input:focus, a:focus, button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Page headers */
.page-header { background: linear-gradient(135deg, var(--color-primary-50) 0%, #faf7f9 100%); }
.page-header h1 { color: var(--color-heading); }
.page-header p { color: var(--color-muted); }

/* Lists pages */
.lists-overview { background: var(--color-surface-alt); }
.category-header p { color: var(--color-muted); }
.category-content h3 { color: var(--color-primary); }

/* Inputs */
.config-group select:focus, .config-group textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(200, 76, 116, 0.12);
}
.config-group input[type="checkbox"] { accent-color: var(--color-primary); }

/* Generated list */
.generated-list { border-radius: var(--radius-lg); }
.list-header { background: var(--color-primary); }
.placeholder-message { color: var(--color-muted); }

/* Checklist */
.checklist-category h3 { color: var(--color-primary); }
.checklist-category .checklist { background: var(--color-surface-alt); border-radius: var(--radius-md); }
.checklist-category .checklist label:hover { background: rgba(200, 76, 116, 0.08); }
.checklist-category .checklist input[type="checkbox"] { accent-color: var(--color-primary); }
#progress-tracker { background: var(--color-surface-alt); }

/* PDF */
.ready-lists h2 { color: var(--color-heading); }
.ready-lists > .container > p { color: var(--color-muted); }
.pdf-card { background: linear-gradient(135deg, #fff 0%, var(--color-surface-alt) 100%); border: 2px solid var(--color-primary-300); border-radius: var(--radius-lg); }
.pdf-card:hover { border-color: var(--color-primary-600); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.pdf-card h3 { color: var(--color-heading); }
.pdf-card p { color: var(--color-muted); }

/* FAQ */
.filter-btn { border: 2px solid var(--color-primary); color: var(--color-primary); }
.filter-btn:hover, .filter-btn.active { background: var(--color-primary); color: #fff; }
.search-container input:focus { border-color: var(--color-primary); }
.toggle-icon { color: var(--color-primary); }
.faq-answer h4 { color: var(--color-primary); }