/* src/styles.css — brand tokens layered over Tailwind */
:root {
  --brand-primary: #1F3A2E;
  --brand-accent:  #B8945A;
  --brand-bg:      #FAF7F1;
  --brand-text:    #1A1A1A;
  --brand-prose:   #2A2A2A;
  --brand-muted:   #6B6B6B;
  --font-serif:    'Cormorant Garamond', Georgia, serif;
  --font-sans:     'Inter', system-ui, sans-serif;
}

html { font-family: var(--font-sans); color: var(--brand-text); background: var(--brand-bg); }
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--brand-primary); font-weight: 500; letter-spacing: 0.01em; }
.brand-accent { color: var(--brand-accent); }
.bg-brand-primary { background: var(--brand-primary); color: #FFF; }
.btn-primary {
  display: inline-block; padding: 0.75rem 1.5rem; background: var(--brand-primary);
  color: #FFF; text-decoration: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.95rem; letter-spacing: 0.05em;
}
.btn-primary:hover { background: var(--brand-accent); }

.prose-styled p { margin: 1.25em 0; line-height: 1.75; color: var(--brand-prose); max-width: 65ch; }
.prose-styled h2 { font-size: 1.875rem; margin-top: 2.5em; margin-bottom: 0.75em; }
.prose-styled h3 { font-size: 1.5rem; margin-top: 2em; }

.filter-chip { background: #FFF; transition: all 0.15s; }
.filter-chip:hover { border-color: var(--brand-accent); }
.filter-chip.active { background: var(--brand-primary); color: #FFF; border-color: var(--brand-primary); }