/* =============================================================================
   TOKENS.CSS  —  CORNERSTONE CHAPEL (DEMO) variant  ·  the variance layer
   -----------------------------------------------------------------------------
   WARM EARTH personality. Warm cream paper, deep olive brand, terracotta accent,
   and a humanist serif type system (Fraunces display + Newsreader body). Keeps
   the traditional chapel-arch shape language and pill buttons. Every value here
   is read by the shared base.css; header.php still overrides the three brand
   colors live from the Customizer / rebrand config, so this file carries the
   non-color personality (fonts, neutrals, accent-text/ink, shape, hero scrim)
   plus AA-safe defaults for the brand colors themselves.

   Overlay of the canonical church-classic tokens.css. Distinct from Grace
   Fellowship (garnet + Cormorant) and New Song (teal + Space Grotesk). All text
   pairings AA-proven; hero text proven over the image+scrim by pixel sampling.
============================================================================= */

/* Humanist serif pairing. Falls back to system serif with no network. */

/* localized google fonts */
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(gf/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(gf/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(gf/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(gf/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(gf/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(gf/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(gf/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(gf/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(gf/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(gf/cY9kfjOCX1hbuyalUrK439vogqC9yFZCYg7oRZaLP4obnf7fTXglsMwoT9ZIFjSAgA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(gf/cY9kfjOCX1hbuyalUrK439vogqC9yFZCYg7oRZaLP4obnf7fTXglsMwoT9ZJFjSAgA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(gf/cY9kfjOCX1hbuyalUrK439vogqC9yFZCYg7oRZaLP4obnf7fTXglsMwoT9ZHFjQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(gf/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbCJYQraA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(gf/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbDJYQraA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(gf/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbNJYQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(gf/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbCJYQraA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(gf/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbDJYQraA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(gf/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbNJYQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(gf/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbCJYQraA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(gf/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbDJYQraA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(gf/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbNJYQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root {
  /* ---- TYPE ------------------------------------------------------------- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Newsreader", "Georgia", "Times New Roman", serif;
  --weight-heading: 600;
  --weight-eyebrow: 600;
  --tracking-eyebrow: 0.24em;
  --eyebrow-transform: uppercase;
  --leading-tight: 1.08;
  --leading-body: 1.70;

  /* ---- BRAND COLOR (the three Customizer fields override these live) ---- */
  --brand: #3A4A2C;              /* deep olive / forest */
  --brand-deep: #303d24;         /* darker olive for gradients / footer base */
  --brand-tint: #eceadf;         /* faint olive wash for alternating bands */
  --accent: #C6743F;             /* terracotta — fills, markers, small accents */
  --accent-deep: #a85e30;        /* pressed/hover accent */
  --accent-text: #8F4526;        /* terracotta TEXT on light — AA (>=4.5:1) */
  --accent-ink: #2E1408;         /* dark text that sits ON a terracotta fill — AA */

  /* ---- NEUTRALS / SURFACES --------------------------------------------- */
  --paper: #F4EDDD;              /* page background — warm cream */
  --surface: #FCF8EF;            /* cards / raised surfaces (warm white) */
  --surface-2: #F1E7D2;          /* alt surface for offset cards */
  --ink: #241C12;               /* primary text (dark espresso) */
  --ink-soft: #4A3E30;           /* secondary text — AA on cream */
  --ink-faint: #6A5D4C;          /* meta / captions — AA (>=4.5:1) on cream */
  --line: rgba(36, 28, 18, 0.16);
  --line-soft: rgba(36, 28, 18, 0.08);
  --on-brand: #F5F0E6;           /* text on dark brand surfaces */
  --on-brand-soft: rgba(245, 240, 230, 0.78);

  /* ---- SHAPE (traditional chapel) -------------------------------------- */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --img-frame-radius: 200px 200px 18px 18px; /* gentle chapel arch on hero/about */
  --border-width: 1px;

  /* ---- DEPTH (warm tint) ----------------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(46, 38, 22, 0.07);
  --shadow: 0 16px 40px rgba(46, 38, 22, 0.13);
  --shadow-lg: 0 32px 74px rgba(46, 38, 22, 0.17);
  --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.12); /* flat neutral — was terracotta glow (anti-slop) */
  --ring: 0 0 0 1px var(--line);

  /* ---- RHYTHM / LAYOUT -------------------------------------------------- */
  --container: 1120px;
  --container-narrow: 720px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --header-height: 78px;
  --card-pad: clamp(1.35rem, 3vw, 2rem);

  /* ---- TYPE SCALE (fluid) ---------------------------------------------- */
  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-small: 0.9rem;
  --fs-body: clamp(1.02rem, 0.98rem + 0.18vw, 1.12rem);
  --fs-lead: clamp(1.14rem, 1.03rem + 0.52vw, 1.36rem);
  --fs-h3: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem);
  --fs-h2: clamp(2.05rem, 1.4rem + 2.8vw, 3.4rem);
  --fs-display: clamp(2.7rem, 1.6rem + 5vw, 5.3rem);
  --fs-mega: clamp(3.1rem, 1.8rem + 6.4vw, 6.4rem);

  /* ---- IMAGERY TREATMENT ----------------------------------------------- */
  /* Umber-to-espresso scrim, tuned so cream hero text clears AA over even the
     brightest golden-hour / candlelit regions of the hero photo (measured). */
  --hero-overlay: linear-gradient(165deg, rgba(46, 34, 18, 0.66) 0%, rgba(26, 18, 10, 0.88) 100%);
  --img-tint: linear-gradient(210deg, rgba(198, 116, 63, 0.10), rgba(58, 74, 44, 0.18));
  --img-ring: 1px solid rgba(255, 255, 255, 0.5);

  /* ---- MOTION ----------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur: 660ms;
  --dur-fast: 230ms;

  /* ---- ELEVATION / WASH ------------------------------------------------- */
  --shadow-xl: 0 46px 104px -28px rgba(46, 38, 22, 0.32);
  --wash-accent: color-mix(in srgb, var(--accent) 12%, transparent);
  --wash-brand: color-mix(in srgb, var(--brand) 6%, transparent);
  --quote-ghost: color-mix(in srgb, var(--brand) 9%, transparent);
  --motif-opacity: 0.12;

  /* ---- PERSONALITY SWITCHES -------------------------------------------- */
  --btn-radius: var(--radius-pill); /* traditional pill buttons */
  --section-band: var(--brand-tint);
  --marker-color: rgba(198, 116, 63, 0.30);
  --texture-opacity: 0.40;
}

/* Dark-brand context: elements inside .on-dark invert their text. */
.on-dark {
  --ink: var(--on-brand);
  --ink-soft: var(--on-brand-soft);
  --ink-faint: rgba(245, 240, 230, 0.60);
  --surface: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.08);
}