/* ============================================================
   CHINUCH ATZMAI — colors_and_type.css
   Editorial yeshiva-institutional. Deep teal, warm gold, cream.
   ============================================================ */

/* ---- Web fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Inter:wght@400;500;600;700&family=Frank+Ruhl+Libre:wght@400;500;700;900&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --teal:       #0E3D3A;   /* primary deep teal/forest. Nav, hero, footer, dark CTAs */
  --teal-deep:  #082724;   /* hover/pressed teal */
  --teal-soft:  #1A524E;   /* secondary teal surface */

  --gold:       #B58A4F;   /* accent warm gold. DONATE pill, key CTAs, italic emphasis */
  --gold-deep:  #8E6A36;   /* hover gold */
  --gold-soft:  #D9B981;   /* tints, faded ornaments */

  --cream:      #F5F0E8;   /* main page background, cream-on-dark text */
  --paper:      #FBF7EF;   /* lighter paper for elevated surfaces */
  --sage:       #D4DCD8;   /* alternating section bg */
  --sage-deep:  #B8C4BE;   /* sage borders */

  --ink:        #1A1A1A;   /* body text */
  --slate:      #4B5565;   /* secondary text, captions, eyebrow */
  --line:       #E0D9C9;   /* hairline dividers on cream */
  --line-dark:  rgba(245,240,232,0.18); /* hairlines on teal */

  /* ---------- SEMANTIC ---------- */
  --bg:               var(--cream);
  --bg-alt:           var(--sage);
  --bg-dark:          var(--teal);
  --fg:               var(--ink);
  --fg-muted:         var(--slate);
  --fg-on-dark:       var(--cream);
  --fg-on-dark-muted: rgba(245,240,232,0.72);
  --accent:           var(--gold);
  --accent-on-dark:   var(--gold-soft);

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif:   'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hebrew:  'Frank Ruhl Libre', 'David Libre', 'SBL Hebrew', serif;

  /* ---------- TYPE SCALE ---------- */
  --fs-display:   clamp(2.6rem, 6vw, 4.4rem);
  --fs-h1:        clamp(2.2rem, 5vw, 3.6rem);
  --fs-h2:        clamp(1.8rem, 3.5vw, 2.6rem);
  --fs-h3:        1.5rem;
  --fs-h4:        1.2rem;
  --fs-lead:      1.15rem;
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-eyebrow:   0.78rem;

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-body:      1.6;

  --tracking-eyebrow: 0.18em;
  --tracking-button:  0.08em;
  --tracking-tight:  -0.01em;

  /* ---------- SPACING ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container:        1180px;
  --container-narrow: 760px;
  --section-pad-y:    5rem;
  --section-pad-x:    1.25rem;

  /* ---------- BORDERS / RADII / SHADOWS ---------- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --border:        1px solid var(--line);
  --border-dark:   1px solid var(--line-dark);
  --accent-top:    3px solid var(--gold);

  --shadow-sm: 0 1px 2px rgba(14,61,58,0.06);
  --shadow:    0 6px 18px rgba(14,61,58,0.10);
  --shadow-lg: 0 18px 40px rgba(14,61,58,0.14);

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  360ms;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--teal);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 .5em;
  text-wrap: pretty;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--teal);
}

/* The signature italic-emphasis pattern. Wrap key phrase in <em>. */
.serif-mixed em,
h1 em, h2 em, h3 em, .display em,
.serif-italic {
  font-style: italic;
  font-weight: 600;
  color: var(--gold);
}

p { margin: 0 0 1em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg); }
.small { font-size: var(--fs-small); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow-slate { color: var(--slate); }
.eyebrow-cream { color: var(--cream); opacity: 0.85; }

a { color: var(--teal); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--gold-deep); }

.text-cream { color: var(--cream); }
.text-cream h1, .text-cream h2, .text-cream h3, .text-cream h4 { color: var(--cream); }
.text-cream em { color: var(--gold-soft); }

.heb {
  font-family: var(--font-hebrew);
  direction: rtl;
  unicode-bidi: isolate;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--section-pad-x); }
.narrow    { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--section-pad-x); }
.section   { padding: var(--section-pad-y) 0; }
.section-cream { background: var(--cream); }
.section-sage  { background: var(--sage); }
.section-paper { background: var(--paper); }
.section-dark  { background: var(--teal); color: var(--cream); }