/* ============================================================================
   Finance Advice USA — tokens + self-hosted faces
   "Emerald Ledger" (Stitch design, 2026-08-31). Loads FIRST, before
   main.css and fnc.css.
   ========================================================================= */

/* --- Faces -------------------------------------------------------------- */

@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/newsreader-latin.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;
}
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/newsreader-latin-ext.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;
}
@font-face {
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/newsreader-italic-latin.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;
}
@font-face {
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/newsreader-italic-latin-ext.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;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.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;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.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;
}

:root {
    /* --- Emerald Ledger palette (from the Stitch tailwind tokens) --------- */
    --fnc-primary:        #047857;   /* deep emerald — chips, links, bands */
    --fnc-primary-dark:   #065f46;   /* hover */
    --fnc-primary-deep:   #022c22;   /* darkest emerald — footer borders */
    --fnc-primary-tint:   #ecfdf5;   /* emerald-50 container (primary/5) */
    --fnc-primary-line:   #a7f3d0;   /* emerald-200 borders (primary/20) */
    --fnc-surface:        #faf9f6;   /* warm off-white page ground */
    --fnc-card:           #ffffff;   /* card surface */
    --fnc-band:           #f5f5f4;   /* tonal section band (stone-100) */
    --fnc-container:      #fafafa;   /* soft widget cards (neutral-50) */
    --fnc-ink:            #171717;   /* headings + body text (neutral-900) */
    --fnc-meta:           #525252;   /* secondary text (neutral-600) */
    --fnc-faint:          #737373;   /* dates, counts (neutral-500) */
    --fnc-rule:           #e5e5e5;   /* hairlines and borders (neutral-200) */
    --fnc-rule-soft:      #f5f5f5;   /* lighter hairlines (neutral-100) */
    --fnc-overlay:        #022c22;   /* image scrim base */
    --fnc-footer-bg:      #047857;   /* dark emerald footer per the design */
    --fnc-footer-text:    #ffffff;
    --fnc-footer-soft:    rgba(255, 255, 255, 0.8);
    --fnc-footer-faint:   rgba(255, 255, 255, 0.6);
    --fnc-footer-rule:    rgba(255, 255, 255, 0.18);

    /* --- Type ------------------------------------------------------------ */
    --fnc-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --fnc-text:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --fnc-size-body:    1.0625rem;   /* 17px */
    --fnc-size-body-sm: 1rem;
    --fnc-size-meta:    0.75rem;     /* 12px, tracked labels */
    --fnc-lh-body:      1.75;
    --fnc-lh-head:      1.12;
    --fnc-track-meta:   0.12em;      /* the widest-tracked label look */

    --fnc-h1:      clamp(2.4rem, 1.5rem + 3vw, 3.75rem);
    --fnc-h1-hero: clamp(2.2rem, 1.4rem + 2.8vw, 3.5rem);
    --fnc-h2:      clamp(1.7rem, 1.3rem + 1.2vw, 2.1rem);
    --fnc-h3:      clamp(1.35rem, 1.15rem + 0.6vw, 1.55rem);
    --fnc-card-title: 1.35rem;

    /* --- Shape & metrics -------------------------------------------------- */
    --fnc-radius-sm: 4px;
    --fnc-radius:    8px;    /* cards, images */
    --fnc-radius-lg: 12px;   /* hero, sidebar feature cards */
    --fnc-shadow-sm: 0 1px 3px rgba(23, 23, 23, 0.05);
    --fnc-shadow:    0 6px 18px rgba(23, 23, 23, 0.07);
    --fnc-page-max:  1280px;
    --fnc-gutter:    clamp(1rem, 3vw, 3rem);
    --fnc-col-gap:   clamp(1.25rem, 2.4vw, 2rem);
    --fnc-tap:       44px;
    --fnc-nav-tap:   48px;

    /* --- Bridge to main.css ----------------------------------------------
       main.css is the shared core and names its own variables. Point every
       one of them at the Emerald Ledger tokens above so the core inherits
       the palette instead of fighting it. Do not restyle main.css.
       ------------------------------------------------------------------ */
    --font-size-body-min: 1rem;
    --font-size-body-max: 1.0625rem;
    --font-size-body-fluid: calc(0.96rem + 0.2vw);
    --font-size-h1-min: 2.4rem;
    --font-size-h1-max: 3.75rem;
    --font-size-h1-fluid: calc(1.5rem + 3vw);
    --font-size-h2-min: 1.7rem;
    --font-size-h2-max: 2.1rem;
    --font-size-h2-fluid: calc(1.3rem + 1.2vw);
    --font-size-h3-min: 1.35rem;
    --font-size-h3-max: 1.55rem;
    --font-size-h3-fluid: calc(1.15rem + 0.6vw);
    --font-size-h4-min: 1.15rem;
    --font-size-h4-max: 1.3rem;
    --font-size-h4-fluid: calc(1.05rem + 0.35vw);
    --font-size-h5-min: 1.0625rem;
    --font-size-h5-max: 1.15rem;
    --font-size-h5-fluid: calc(1rem + 0.2vw);
    --font-size-h6-min: 1rem;
    --font-size-h6-max: 1.0625rem;
    --font-size-h6-fluid: calc(0.96rem + 0.12vw);
    --line-height-body: 1.75;
    --line-height-heading: 1.12;

    --color-primary: #047857;
    --color-primary-hover: #065f46;
    --color-heading: #171717;
    --color-accent: #047857;
    --color-text-dark: #171717;
    --color-text-medium: #404040;
    --color-text-light: #525252;
    --color-background: #faf9f6;
    --color-background-light: #f5f5f4;
    --color-border-light: #e5e5e5;
    --color-border: #e5e5e5;
    --color-footer-bg: #047857;
    --color-footer-border: #065f46;
    --color-footer-text: #ffffff;
    --color-copyright: rgba(255, 255, 255, 0.7);

    --color-facebook: #171717;
    --color-facebook-hover: #047857;
    --color-twitter: #171717;
    --color-twitter-hover: #047857;
    --color-pinterest: #171717;
    --color-pinterest-hover: #047857;
    --color-linkedin: #171717;
    --color-linkedin-hover: #047857;

    --color-error: #ba1a1a;
    --color-error-bg: #ffdad6;
    --color-error-text: #93000a;
    --color-warning: #8a6a1e;
    --color-warning-bg: #f5f0e2;
    --color-warning-text: #6a5117;
}