/* ── Claude design language overlay — applied 2026-04-22 ───────────── */
/* Overrides the existing dark palette with Anthropic's warm editorial  */
/* aesthetic. Preserves all HTML structure; pure CSS swap.              */

:root {
  --cream: #faf9f5;
  --cream-card: #f0eee6;
  --cream-card-2: #ebe9df;
  --text: #1f1e1c;
  --text-muted: #5a564e;
  --hairline: #d4d0c5;
  --accent: #d97756;
  --accent-dark: #c15f3c;
}

html, body {
  background: var(--cream) !important;
  color: var(--text) !important;
  font-family: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

/* Headings — serif editorial */
h1, h2, h3, h4, .hero h1, .hero-title,
[class*='hero'] h1, [class*='hero'] h2 {
  font-family: 'Iowan Old Style', 'Palatino', 'Georgia', serif !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem) !important; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem) !important; }

/* Paragraphs + body text + list items */
p, li, span, small, dd, dt, blockquote {
  color: var(--text) !important;
}
.muted, .text-muted, [class*='subtitle'], [class*='subtle'],
[class*='tagline'], .dim, .faint {
  color: var(--text-muted) !important;
}

/* Links */
a:not([class*='btn']):not(.cta):not(.button) {
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
}
a:not([class*='btn']):not(.cta):not(.button):hover {
  color: var(--accent-dark) !important;
}

/* Buttons / CTAs */
button, .btn, .cta, a.button, input[type='submit'],
a[class*='cta'], a[class*='btn'], .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  border-radius: 6px !important;
  padding: 12px 22px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background .15s ease !important;
  text-decoration: none !important;
}
button:hover, .btn:hover, .cta:hover, a.button:hover, .btn-primary:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: #fff !important;
}

/* Secondary buttons — outline */
.btn-secondary, .btn-outline, a[class*='btn-outline'] {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
}
.btn-secondary:hover, .btn-outline:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Cards, panels, info boxes */
.card, .panel, [class*='card'], [class*='box'], [class*='block'],
[class*='section'], [class*='cell'], [class*='tile'], .feature {
  background: var(--cream-card) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  color: var(--text) !important;
}
.card h1, .card h2, .card h3, .panel h3, [class*='card'] h3,
[class*='card'] h4, [class*='card'] h2 { color: var(--text) !important; }

/* Navigation bar */
nav, header, [class*='navbar'], [class*='header'], [role='navigation'] {
  background: var(--cream) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: none !important;
}
nav a, header a, [role='navigation'] a {
  color: var(--text) !important;
  text-decoration: none !important;
}
nav a:hover, header a:hover { color: var(--accent) !important; }

/* Footer */
footer, [class*='footer'] {
  background: var(--cream-card-2) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--hairline) !important;
}
footer a, [class*='footer'] a { color: var(--text) !important; }

/* Tables */
table { background: var(--cream) !important; color: var(--text) !important; }
th, td { border-color: var(--hairline) !important; color: var(--text) !important; }
thead { background: var(--cream-card) !important; }

/* Code + pre */
code, pre, kbd, samp {
  background: var(--cream-card-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

/* Badges / chips / tags */
.badge, [class*='badge'], [class*='chip'], [class*='tag'],
[class*='pill'], [class*='label'] {
  background: var(--cream-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

/* Admin / login pages keep their original look — class-based opt-out */
.keep-dark, .keep-dark * { background: initial !important; color: initial !important; }

/* Kill any remaining dark backgrounds the agent missed */
[style*='background: #080b12'], [style*='background:#080b12'],
[style*='background: #0A0D14'], [style*='background:#0A0D14'],
[style*='background: #12141f'], [style*='background:#12141f'],
[style*='background: #0d1733'], [style*='background:#0d1733'] {
  background: var(--cream) !important;
  color: var(--text) !important;
}

/* Editorial rhythm */
main, [role='main'], .container, .content {
  padding-top: clamp(40px, 6vw, 80px) !important;
  padding-bottom: clamp(40px, 6vw, 80px) !important;
}