/* Nacer Madre · shared design system
   Tokens, reset, typography, layout, nav, buttons, footer.
   Page-specific styles live inline in each HTML file. */

:root {
  --bg: #fdfbf7;
  --bg-alt: #f6f1e8;
  --ink: #1a1a1a;
  --ink-soft: #5a5450;
  --ink-mute: #5a5450;
  --forest: #3a4a2f;
  --forest-soft: #5f6e50;
  --gold: #8a6a2e;
  --border: rgba(26,26,26,0.08);
  --border-strong: rgba(26,26,26,0.14);
  --pad-y: 96px;
  --pad-y-md: 64px;
  --pad-y-sm: 48px;
  --w-wide: 1120px;
  --w-prose: 680px;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.70;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }

/* Layout containers */
.wrap-wide { max-width: var(--w-wide); margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: var(--w-prose); margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) {
  .wrap, .wrap-wide, .wrap-narrow { padding: 0 24px; }
}

/* Section rhythm */
section { padding: var(--pad-y) 0; }
@media (max-width: 1023px) { section { padding: var(--pad-y-md) 0; } }
@media (max-width: 640px) { section { padding: var(--pad-y-sm) 0; } }

/* Typography */
h1, h2, h3, h4 { font-family: 'Lora', serif; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(27px, 3.4vw, 38px); line-height: 1.20; letter-spacing: -0.01em; }
h3 { font-size: 24px; line-height: 1.30; }
p { color: var(--ink-soft); font-size: 17px; line-height: 1.70; }
strong { color: var(--ink); font-weight: 500; }
em { color: var(--forest); font-style: italic; }
a { color: var(--forest); }
.eyebrow { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }

/* Utility text sizes (only three allowed) */
.text-lead, .hero-lead, .section-lead { font-size: 19px; line-height: 1.70; }
.text-sm { font-size: 14px; line-height: 1.50; }

/* Header banner (used on articles + legal pages) */
.header-banner { width: 100%; aspect-ratio: 6/1; max-height: 260px; background: url('logo-banner.jpg') center center / cover no-repeat; }
@media (max-width: 480px) { .header-banner { max-height: 120px; } }

/* Nav */
nav { padding: 0; height: 68px; position: sticky; top: 0; z-index: 20; background: rgba(253,251,247,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: var(--w-wide); margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; height: 100%; gap: 24px; }
@media (max-width: 768px) { .nav-inner { padding: 0 24px; } }
.nav-brand { font-family: 'Lora', serif; font-size: 20px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; }
.nav-brand:hover { color: var(--forest); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--forest); }
.nav-links a.nav-cta { background: var(--forest); color: var(--bg); padding: 0 20px; height: 42px; display: inline-flex; align-items: center; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.nav-links a.nav-cta:hover { background: #2c3823; color: var(--bg); }
@media (max-width: 720px) { .nav-links { gap: 16px; } .nav-links a:not(.nav-cta) { font-size: 14px; } .nav-brand { font-size: 17px; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 28px; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; cursor: pointer; border: none; white-space: nowrap; }
.btn-lg { height: 60px; padding: 0 36px; font-size: 17px; }
.btn-sm { height: 42px; padding: 0 20px; font-size: 15px; }
.btn-primary, .btn-forest { background: var(--forest); color: var(--bg); }
.btn-primary:hover, .btn-forest:hover { background: #2c3823; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--forest); border: 1px solid var(--forest); }
.btn-secondary:hover { background: var(--forest); color: var(--bg); }

/* Footer basics */
footer a:hover { color: var(--ink); }