/* ============================================================
   LIFEFORCE FINANCIAL — BRAND SYSTEM CSS
   Color tokens + typography aligned to Figma brand kit
   Last updated: 2026-04-28
   ============================================================

   Color tokens:
   LF Parchment  #F5F1EC  — primary background
   LF Surface    #ECE8DF  — cards, stat blocks, elevated surfaces
   LF Ink        #1A1A1A  — primary text, CTAs, high-contrast panels
   LF Sage       #5B7B6F  — accent, labels, links, brand signature
   LF Warm Gray  #8A8A85  — body text, supporting copy, metadata

   Typography:
   Display       — Cormorant Garamond Light Italic (Canela substitute)
   UI / Body     — DM Sans (Söhne substitute)
   ============================================================ */

/* ─── FONT FACES (self-hosted — Canela + Söhne) ────────────── */

@font-face {
  font-family: 'Canela';
  src: url('/fonts/Canela-LightItalic-Web.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Canela';
  src: url('/fonts/Canela-Regular-Web.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Canela';
  src: url('/fonts/Canela-Bold-Web.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Söhne';
  src: url('/fonts/soehne-buch.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Söhne';
  src: url('/fonts/soehne-kraftig.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Söhne';
  src: url('/fonts/soehne-extrafett.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ─── BASE ─────────────────────────────────────────────────── */

html,
body {
  background-color: #F5F1EC !important;
  color: #1A1A1A !important;
  font-family: 'Söhne', system-ui, -apple-system, sans-serif !important;
}

/* ─── BACKGROUND OVERRIDES ──────────────────────────────────── */

.bg-white                { background-color: #F5F1EC !important; }
.bg-gray-bg              { background-color: #F5F1EC !important; }
.bg-gray-50              { background-color: #ECE8DF !important; }
.bg-gray-100             { background-color: #ECE8DF !important; }
.bg-gray-200             { background-color: #d8d4cb !important; }

/* Header */
.header-sticky {
  background: rgba(245, 241, 236, 0.96) !important;
  border-bottom: 1px solid rgba(26, 26, 26, 0.07) !important;
}

/* Mobile menu */
.mobile-menu {
  background: rgba(245, 241, 236, 0.99) !important;
}

/* Dropdown panels */
.dropdown-panel {
  background: #F5F1EC !important;
  box-shadow: 0 12px 40px rgba(26, 26, 26, 0.10) !important;
}

/* Dark / Ink panels */
.bg-navy,
[class*="bg-navy"],
section.bg-navy,
div.bg-navy {
  background-color: #1A1A1A !important;
}

/* ─── TEXT COLOR OVERRIDES ──────────────────────────────────── */

.text-primary            { color: #1A1A1A !important; }
.text-navy               { color: #1A1A1A !important; }
.text-gray-text          { color: #8A8A85 !important; }
.text-gray-300           { color: #8A8A85 !important; }
.text-gray-400           { color: #8A8A85 !important; }
.text-gray-500           { color: #8A8A85 !important; }
.text-gray-600           { color: #8A8A85 !important; }
.text-gray-700           { color: #6e6e69 !important; }

/* Borders */
.border-gray-100         { border-color: rgba(26, 26, 26, 0.08) !important; }
.border-b                { border-color: rgba(26, 26, 26, 0.08) !important; }
.border-gray-700         { border-color: rgba(245, 241, 236, 0.15) !important; }

/* ─── SAGE ACCENT ───────────────────────────────────────────── */

/* Any existing green/blue accents get mapped to Sage */
a,
a:visited {
  color: inherit;
}

a:hover {
  color: #5B7B6F;
}

.dropdown-panel a:hover  { color: #5B7B6F !important; }

/* Nav active states, labels, eyebrow text */
.dropdown-label          { color: #5B7B6F !important; }

/* ─── BUTTONS ───────────────────────────────────────────────── */

.btn-primary {
  background: #1A1A1A !important;
  color: #F5F1EC !important;
  font-family: 'Söhne', system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  border-radius: 8px !important;
}

.btn-primary:hover {
  background: #5B7B6F !important;
  box-shadow: 0 4px 16px rgba(91, 123, 111, 0.25) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary {
  color: #5B7B6F !important;
  border-color: #5B7B6F !important;
  font-family: 'Söhne', system-ui, sans-serif !important;
  font-weight: 500 !important;
}

.btn-secondary:hover {
  color: #1A1A1A !important;
  border-color: #1A1A1A !important;
}

/* ─── TYPOGRAPHY ────────────────────────────────────────────── */

/* Display headings — Canela Light Italic (H1 + H2) */
h1,
h2,
.text-5xl,
.text-4xl,
.text-3xl {
  font-family: 'Canela', 'Georgia', serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

/* Sub-headings / UI headings — Söhne Kräftig */
h3,
h4,
h5,
h6,
.text-xl,
.text-2xl {
  font-family: 'Söhne', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* Eyebrows / labels — Söhne uppercase + tracked */
[class*="uppercase"][class*="tracking"],
.text-xs.uppercase,
.text-sm.uppercase,
.eyebrow {
  font-family: 'Söhne', system-ui, sans-serif !important;
  letter-spacing: 0.15em !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

/* Sage-colored eyebrow labels (brand signature use) */
.text-xs.uppercase.tracking-widest,
.text-sm.uppercase.tracking-widest,
.text-xs.font-medium.uppercase,
.text-sm.font-medium.uppercase,
[class*="tracking-widest"][class*="uppercase"] {
  color: #5B7B6F !important;
}

/* Eyebrow labels: override gray-text to Sage when uppercase */
p.uppercase.tracking-widest,
p[class*="tracking-widest"][class*="uppercase"] {
  color: #5B7B6F !important;
}

/* Body text — Söhne Buch */
p,
li,
td,
th,
input,
textarea,
select,
label {
  font-family: 'Söhne', system-ui, sans-serif !important;
}

/* ─── CARDS / STAT BLOCKS ───────────────────────────────────── */

/* Any white card on a parchment background should lift to Surface */
.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.bg-white.rounded-lg,
.bg-white.rounded-3xl,
.bg-white.shadow,
.bg-white.border {
  background-color: #ECE8DF !important;
}

/* ─── FORM INPUTS ───────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background-color: #F5F1EC !important;
  border-color: rgba(26, 26, 26, 0.18) !important;
  color: #1A1A1A !important;
}

input::placeholder,
textarea::placeholder {
  color: #8A8A85 !important;
}

/* ─── FOOTER ────────────────────────────────────────────────── */

footer {
  background-color: #1A1A1A !important;
  color: #F5F1EC !important;
}

footer a { color: #8A8A85 !important; }
footer a:hover { color: #F5F1EC !important; }

/* ─── INNER PAGE FIXES ─────────────────────────────────────── */

/* Body always parchment */
body {
  background-color: #F5F1EC !important;
}

/* Hero images on inner pages — give them proper framing */
section > img.w-full {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  margin-bottom: 0;
}

/* Bullet point dots — use Sage instead of raw navy text */
.text-navy.mt-1\.5 {
  color: #5B7B6F !important;
  font-size: 0.6rem !important;
}

/* bg-gray-bg should always be Parchment */
.bg-gray-bg {
  background-color: #F5F1EC !important;
}

/* bg-navy panels use Ink */
.bg-navy {
  background-color: #1A1A1A !important;
}
.bg-navy * {
  /* Don't override explicit color on children — just let them inherit */
}

/* Inner page section alt backgrounds — alternate parchment/surface */
section:nth-of-type(even) {
  /* Keep brand system colors; no override — pages set their own */
}

/* Related resources link cards */
.block.p-4.rounded-xl.bg-white {
  background-color: #ECE8DF !important;
}
.block.p-4.rounded-xl.bg-white:hover {
  background-color: #E2DDD4 !important;
}

/* ─── UTILITY OVERRIDES ─────────────────────────────────────── */

/* Dividers */
hr { border-color: rgba(26, 26, 26, 0.08) !important; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F5F1EC; }
::-webkit-scrollbar-thumb { background: #8A8A85; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #5B7B6F; }