/* ============================================
   SALEM MADRID — Design Tokens
   Colors, Typography, Spacing
   ============================================ */

/* ============================================
   LOCAL FONT FACES — Archivo, Archivo Expanded, Monarcha
   (uploaded to assets/ — paths are relative to this CSS file)
   ============================================ */

/* ---- Archivo (primary headline + body sans) ---- */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/Archivo/Archivo-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/Archivo/Archivo-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/Archivo/Archivo-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/Archivo/Archivo-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/Archivo/Archivo-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/Archivo/Archivo-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/Archivo/Archivo-BlackItalic.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ---- Archivo Expanded (display-only, big section headlines if we want extra width) ---- */
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../assets/Archivo_Expanded/Archivo_Expanded-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../assets/Archivo_Expanded/Archivo_Expanded-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../assets/Archivo_Expanded/Archivo_Expanded-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---- Monarcha (editorial accent — italic words inside headlines) ---- */
@font-face {
  font-family: 'Monarcha';
  src: url('../assets/Monarcha/Monarcha-SemiBold-Italic.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}

/* ---- Remaining Google Fonts (condensed labels, script, scripture serif) ---- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Sacramento&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* ---- BASE COLORS ---- */
  --color-red:        #E82203;
  --color-red-dark:   #C41B02;
  --color-red-light:  #FF3A1E;
  --color-red-faint:  #FFF0EE;

  /* Salem Fuenlabrada — warm campaign palette */
  --color-warm:        #F2C491;   /* primary peach — campaign pieces and accent sections */
  --color-warm-light:  #F8D5A8;   /* highlights, hover surfaces */
  --color-warm-dark:   #E5A864;   /* divider lines, accents on warm bg */
  --color-warm-deep:   #C9802F;   /* deep accents, text on light warm */

  /* Cream — softer warm neutral, alternates with peach across sections */
  --color-cream:        #E5D9CB;
  --color-cream-light:  #F0E7DA;
  --color-cream-deep:   #D4C5B0;

  --color-white:      #FFFFFF;
  --color-light:      #F5F5F5;
  --color-border:     #E0E0E0;
  --color-mid:        #888888;
  --color-dark-mid:   #555555;
  --color-dark:       #1C1C1C;
  --color-footer:     #1A1A1A;

  /* ---- SEMANTIC COLORS ---- */
  --color-bg:         var(--color-white);
  --color-bg-alt:     var(--color-light);
  --color-fg1:        var(--color-dark);        /* primary text */
  --color-fg2:        var(--color-dark-mid);    /* secondary text */
  --color-fg3:        var(--color-mid);         /* captions, meta */
  --color-accent:     var(--color-red);         /* CTAs, highlights */
  --color-accent-hover: var(--color-red-dark);
  --color-link:       var(--color-red);
  --color-link-hover: var(--color-red-dark);

  /* ---- TYPOGRAPHY ----
     Three voices total:
     1. Monarcha italic semibold — ALL display headlines + scripture (the editorial voice)
     2. Oswald bold caps        — eyebrows, labels, timestamps (the metadata voice)
     3. Archivo regular         — body paragraphs (the support voice)
     Sacramento + Cormorant stay declared as fallbacks but are no longer the active stack. */
  --font-heading:     'Monarcha', 'Cormorant Garamond', Georgia, serif;    /* italic serif — display + accent */
  --font-body:        'Archivo', system-ui, -apple-system, sans-serif;     /* sans regular — body, paragraphs */
  --font-condensed:   'Oswald', 'Archivo', sans-serif;                     /* condensed bold caps — eyebrows, labels, timestamps */
  --font-accent:      var(--font-heading);                                 /* same as heading — kept as alias for back-compat */
  --font-display:     'Archivo Expanded', 'Archivo', sans-serif;           /* legacy alias, unused */
  --font-script:      'Sacramento', 'Brush Script MT', cursive;            /* legacy — handwritten flourish, not in active use */
  --font-serif:       'Cormorant Garamond', Georgia, serif;                /* legacy alias for Monarcha fallback */

  /* Font sizes */
  --fs-display:       3.5rem;     /* 56px — hero/display */
  --fs-h1:            2.75rem;    /* 44px */
  --fs-h2:            2rem;       /* 32px */
  --fs-h3:            1.375rem;   /* 22px */
  --fs-h4:            1.125rem;   /* 18px */
  --fs-body:          1rem;       /* 16px */
  --fs-small:         0.875rem;   /* 14px */
  --fs-xs:            0.8125rem;  /* 13px */

  /* Font weights */
  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-bold:          700;
  --fw-black:         900;

  /* Line heights */
  --lh-tight:         1.15;
  --lh-heading:       1.25;
  --lh-body:          1.65;
  --lh-relaxed:       1.8;

  /* Letter spacing */
  --ls-tight:         -0.02em;
  --ls-normal:         0em;
  --ls-wide:           0.06em;
  --ls-wider:          0.12em;

  /* ---- SPACING ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- LAYOUT ---- */
  --max-width:        1200px;
  --content-width:    780px;
  --section-pad-y:    var(--space-20);
  --section-pad-x:    var(--space-6);

  /* ---- BORDERS & RADIUS ---- */
  --radius:           0px;       /* Cards & sections stay sharp (editorial brand) */
  --radius-button:    8px;       /* Buttons get a subtle softening — modern but not playful */
  --radius-pill:      999px;     /* Pill CTAs for hero / primary actions */
  --border-width:     1px;
  --border-color:     var(--color-border);
  --border:           1px solid var(--color-border);

  /* ---- SHADOWS ---- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.07);
  --shadow-md:   0 2px 10px rgba(0,0,0,0.09);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);

  /* ---- TRANSITIONS ---- */
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;

  /* ---- Z-INDEX ---- */
  --z-header: 100;
  --z-modal:  500;
  --z-toast:  999;
}

/* ============================================
   SEMANTIC ELEMENT STYLES
   ============================================ */

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 600;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--color-fg1);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--color-fg1);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  font-style: italic;
  line-height: 1.18;
  color: var(--color-fg1);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--color-fg1);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-fg1);
}

.display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

small, .small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-fg2);
}

.caption, .xs {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-fg3);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-link-hover);
}

/* ---- UTILITY CLASSES ---- */
.text-red    { color: var(--color-red); }
.text-white  { color: var(--color-white); }
.text-dark   { color: var(--color-dark); }
.text-mid    { color: var(--color-fg2); }
.text-upper  { text-transform: uppercase; letter-spacing: var(--ls-wider); }
.font-heading   { font-family: var(--font-heading); }
.font-body      { font-family: var(--font-body); }
.font-display   { font-family: var(--font-display); }
.font-condensed { font-family: var(--font-condensed); }
.font-script    { font-family: var(--font-script); }
.font-serif     { font-family: var(--font-serif); }
.font-accent    { font-family: var(--font-accent); font-style: italic; font-weight: 600; }

/* Inline accent — Monarcha SemiBold Italic, designed to be sprinkled inside
   a sans headline to add editorial personality (the "book more meetings" pattern).
   Bumps size slightly because italic serifs read smaller than bold sans at the same px. */
.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 1.04em;
  letter-spacing: -0.005em;
}
.accent-red { color: var(--color-red); }
.fw-bold  { font-weight: var(--fw-bold); }
.fw-black { font-weight: var(--fw-black); }

/* Campaign label: tall condensed caps, used for section labels & timestamps */
.label-condensed {
  font-family: var(--font-condensed);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  line-height: 1;
}

/* Editorial scripture/pull-quote */
.scripture {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1.4;
}
.scripture-cite {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-fg2);
  margin-top: var(--space-3);
}

/* Signature flourish (e.g. pastor's name) */
.signature {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  line-height: 1;
}

/* Page surfaces */
.bg-warm        { background: var(--color-warm); color: var(--color-dark); }
.bg-warm-light  { background: var(--color-warm-light); color: var(--color-dark); }
.bg-cream       { background: var(--color-cream); color: var(--color-dark); }
.bg-cream-light { background: var(--color-cream-light); color: var(--color-dark); }
.bg-dark        { background: var(--color-footer); color: var(--color-white); }

/* ---- BUTTONS ----
   Buttons use --font-condensed (Oswald) — Monarcha italic doesn't read well in tight,
   uppercase, tracked CTA text. Oswald bold caps gives compact, confident, legible labels. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-condensed);
  font-size: var(--fs-small);
  font-weight: 700;
  font-style: normal;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn .btn-arrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 1.15em;
  line-height: 0;
  transition: transform var(--transition-fast);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-pill { border-radius: var(--radius-pill); padding: 12px 24px; }
.btn-lg   { font-size: 14px; padding: 14px 28px; }

.btn-primary {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}
.btn-primary:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 34, 3, 0.28);
}

.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.btn-dark:hover {
  background: #000;
  border-color: #000;
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

.btn-outline {
  background: transparent;
  color: var(--color-red);
  border-color: var(--color-red);
}
.btn-outline:hover {
  background: var(--color-red);
  color: var(--color-white);
}

.btn-outline-dark {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.btn-outline-dark:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

.btn-white {
  background: var(--color-white);
  color: var(--color-red);
  border-color: var(--color-white);
}
.btn-white:hover {
  background: var(--color-red-faint);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-fg1);
  border-color: rgba(28,28,28,0.25);
}
.btn-ghost:hover {
  border-color: var(--color-fg1);
}