/* ============================================================
   FIRMADOS EM CRISTO — Design Tokens
   Igreja cristã em Joinville (SC). Identidade aplicada
   principalmente em peças de social media (feed e stories).
   ============================================================ */

/* ============================================================
   FONT FACES — arquivos da marca
   ============================================================ */

/* ----- Neue Haas Grotesk Display Pro (sans default) ----- */
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayXXThin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayXXThinItalic.ttf") format("truetype");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayXThin.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayXThinItalic.ttf") format("truetype");
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayThin.ttf") format("truetype");
  font-weight: 250; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayThinItalic.ttf") format("truetype");
  font-weight: 250; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayLight.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayLightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayRomanItalic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayMediu.ttf") format("truetype"); /* sic — nome do arquivo */
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayMediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayBoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayBlack.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayBlackItalic.ttf") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ----- Birds of Paradise (script destaque) ----- */
@font-face {
  font-family: "Birds of Paradise";
  src: url("fonts/Birds_of_Paradise___PERSONAL_USE_ONLY.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* DM Serif Display antes era o fallback do display; agora Neue Haas Black cobre */

:root {
  /* -------------------------------------------------------
     COLORS — Primários (verde profundo, fundo dominante)
     ------------------------------------------------------- */
  --fec-green-950:   #0e2c25;  /* sombra mais profunda */
  --fec-green-900:   #1a443c;  /* fundo dominante (peças escuras) — padrão */
  --fec-green-800:   #235049;  /* fundo "vinheta" / variação */
  --fec-green-700:   #2d5d54;  /* hover/elevação sobre fundo escuro */
  --fec-green-600:   #3a6e63;
  --fec-green-500:   #36755c;  /* verde-musgo médio */
  --fec-green-400:   #5d8a6d;  /* musgo claro / outline */
  --fec-green-300:   #8da990;  /* tinta esmaecida */
  --fec-olive-500:   #97a55b;  /* oliva amarelado (apoio) */
  --fec-olive-400:   #c2c684;  /* verde-claro amanteigado (ex: "semana") */

  /* -------------------------------------------------------
     COLORS — Destaque (amarelo manteiga)
     ------------------------------------------------------- */
  --fec-butter-500:  #e9e696;  /* títulos de ênfase, glow, capsules */
  --fec-butter-400:  #f1eeab;
  --fec-butter-300:  #f7f4c5;
  --fec-butter-200:  #faf7d9;

  /* -------------------------------------------------------
     COLORS — Off-white / creme (textos sobre fundo escuro)
     ------------------------------------------------------- */
  --fec-cream-50:    #f5f1de;  /* texto principal sobre verde */
  --fec-cream-100:   #ede6c9;  /* tom do logo */
  --fec-cream-200:   #d9d0a8;

  /* -------------------------------------------------------
     COLORS — Terrosos quentes (peças de Mulheres, Crochê)
     ------------------------------------------------------- */
  --fec-sand-100:    #e7d4b6;
  --fec-sand-300:    #c9a37a;
  --fec-sand-500:    #a07a4d;
  --fec-clay-700:    #6e4a2e;
  --fec-clay-900:    #3d2918;

  /* -------------------------------------------------------
     SEMANTIC TOKENS
     ------------------------------------------------------- */
  --fec-bg:          var(--fec-green-900);
  --fec-bg-elev:     var(--fec-green-800);
  --fec-bg-warm:     var(--fec-clay-900);     /* alternativa quente */
  --fec-fg:          var(--fec-cream-50);     /* texto principal */
  --fec-fg-muted:    var(--fec-cream-200);    /* texto secundário */
  --fec-fg-faint:    rgba(245, 241, 222, 0.45);
  --fec-accent:      var(--fec-butter-500);   /* destaques amarelos */
  --fec-accent-soft: var(--fec-butter-300);
  --fec-line:        rgba(233, 230, 150, 0.55); /* borda capsule */
  --fec-line-soft:   rgba(245, 241, 222, 0.18);

  /* -------------------------------------------------------
     TYPE — Famílias
     -------------------------------------------------------
     OBS: substituições Google Fonts — flag para o usuário:
       • Serif display chunky    → DM Serif Display
       • Script caligráfico      → Yellowtail
       • Sans humanista          → DM Sans
     A fonte original parece ser uma serif com brackets fortes
     (tipo Recoleta / Tobias) — pedir arquivos para upgrade. */
  /* Display heavy = Neue Haas Black (mesmo arquivo, peso 900) */
  --fec-font-serif:   "Neue Haas Display", "Helvetica Neue", system-ui, sans-serif;
  --fec-font-display: "Neue Haas Display", "Helvetica Neue", system-ui, sans-serif;
  --fec-font-script:  "Birds of Paradise", "Yellowtail", "Brusher", cursive;
  --fec-font-sans:    "Neue Haas Display", "Helvetica Neue", system-ui, -apple-system, sans-serif;

  /* -------------------------------------------------------
     TYPE — Escala (relativa a 16px base)
     ------------------------------------------------------- */
  --fec-text-xs:     0.75rem;   /* 12px — micro labels */
  --fec-text-sm:     0.875rem;  /* 14px — apoio */
  --fec-text-base:   1rem;      /* 16px — corpo */
  --fec-text-md:     1.125rem;  /* 18px */
  --fec-text-lg:     1.375rem;  /* 22px — destaque */
  --fec-text-xl:     1.75rem;   /* 28px */
  --fec-text-2xl:    2.25rem;   /* 36px */
  --fec-text-3xl:    3rem;      /* 48px — título de peça */
  --fec-text-4xl:    4.5rem;    /* 72px — display impact */
  --fec-text-5xl:    6rem;      /* 96px — feed hero */

  --fec-leading-tight: 0.95;
  --fec-leading-snug:  1.1;
  --fec-leading-normal:1.45;
  --fec-leading-loose: 1.6;

  --fec-track-tight: -0.02em;
  --fec-track-wide:   0.08em;   /* uppercase eyebrow */

  /* -------------------------------------------------------
     SHAPE / SPACING
     ------------------------------------------------------- */
  --fec-radius-xs:   6px;
  --fec-radius-sm:   10px;
  --fec-radius-md:   14px;
  --fec-radius-lg:   18px;
  --fec-radius-pill: 999px;     /* cápsulas: endereço, versículo */

  --fec-space-1:  4px;
  --fec-space-2:  8px;
  --fec-space-3:  12px;
  --fec-space-4:  16px;
  --fec-space-5:  24px;
  --fec-space-6:  32px;
  --fec-space-8:  48px;
  --fec-space-10: 64px;
  --fec-space-12: 96px;

  /* -------------------------------------------------------
     ELEVATION / GLOWS — luz amarela suave (assinatura)
     ------------------------------------------------------- */
  --fec-glow-butter:
    0 0 90px 30px rgba(233, 230, 150, 0.22),
    0 0 32px 8px rgba(233, 230, 150, 0.18);
  --fec-glow-butter-soft:
    0 0 40px 10px rgba(233, 230, 150, 0.18);
  --fec-shadow-card:
    0 8px 24px rgba(6, 29, 21, 0.35);
  --fec-inner-noise: inset 0 0 120px rgba(6, 29, 21, 0.35);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.fec-h1 { /* Título display Neue Haas Roman em escala (ex: "Culto") */
  font-family: var(--fec-font-display);
  font-size: var(--fec-text-5xl);
  line-height: var(--fec-leading-tight);
  letter-spacing: var(--fec-track-tight);
  font-weight: 400;
  color: var(--fec-accent);
}

.fec-h2 { /* Título de peça menor */
  font-family: var(--fec-font-display);
  font-size: var(--fec-text-3xl);
  line-height: var(--fec-leading-snug);
  letter-spacing: var(--fec-track-tight);
  font-weight: 400;
  color: var(--fec-fg);
}

.fec-script { /* "inaugural", "Agenda", "Mulher" */
  font-family: var(--fec-font-script);
  font-size: var(--fec-text-4xl);
  line-height: 1;
  font-weight: 400;
  color: var(--fec-fg);
}

.fec-eyebrow { /* "DOMINGO", "TEMA", "PARTICIPAÇÃO" */
  font-family: var(--fec-font-sans);
  font-size: var(--fec-text-sm);
  font-weight: 400;
  letter-spacing: var(--fec-track-wide);
  text-transform: uppercase;
  color: var(--fec-fg);
}

.fec-meta { /* "// 19 horas" — info de horário/data */
  font-family: var(--fec-font-sans);
  font-size: var(--fec-text-base);
  font-weight: 300;
  color: var(--fec-accent);
}

.fec-body { /* corpo padrão */
  font-family: var(--fec-font-sans);
  font-size: var(--fec-text-base);
  font-weight: 300;
  line-height: var(--fec-leading-normal);
  color: var(--fec-fg);
}

.fec-em { /* ênfase italic curta */
  font-style: italic;
  font-weight: 400;
}

.fec-verse { /* versículo entre aspas */
  font-family: var(--fec-font-sans);
  font-size: var(--fec-text-md);
  font-weight: 300;
  line-height: var(--fec-leading-loose);
  color: var(--fec-fg);
  font-style: normal;
}
.fec-verse::before { content: "\201C"; }
.fec-verse::after  { content: "\201D"; }

.fec-ref-tag { /* cápsula com referência bíblica */
  display: inline-flex;
  align-items: center;
  font-family: var(--fec-font-sans);
  font-size: var(--fec-text-sm);
  font-weight: 400;
  letter-spacing: var(--fec-track-wide);
  text-transform: uppercase;
  color: var(--fec-green-900);
  background: var(--fec-accent);
  padding: 6px 14px;
  border-radius: var(--fec-radius-pill);
}

.fec-address-pill { /* cápsula de endereço */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fec-font-sans);
  font-size: var(--fec-text-lg);
  font-weight: 400;
  color: var(--fec-accent);
  background: var(--fec-green-800);
  border: 1.5px solid var(--fec-line);
  padding: 12px 22px;
  border-radius: var(--fec-radius-pill);
}