/* ============================================================================
   HealthyReads — tokens + self-hosted faces
   "Wellness Magazine" (Stitch design, 2026-08-19). Loads FIRST, before
   main.css and hr.css.
   ========================================================================= */

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

@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/lexend-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: 'Lexend';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/lexend-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: 'Work Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/work-sans-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: 'Work Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/work-sans-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: 'Work Sans';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/work-sans-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: 'Work Sans';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/work-sans-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;
}

:root {
    /* --- Wellness palette (from the Stitch tailwind tokens) -------------- */
    --hr-primary:        #0F766E;   /* brand teal — chips, links, newsletter band */
    --hr-primary-dark:   #0B5952;   /* hover */
    --hr-primary-tint:   #D7EEEB;   /* soft teal container */
    --hr-surface:        #F8FAFB;   /* page ground */
    --hr-card:           #FFFFFF;   /* card surface */
    --hr-band:           #F1F4F5;   /* tonal section band (surface-container-low) */
    --hr-container:      #ECF1F2;   /* sidebar widget cards (surface-container) */
    --hr-ink:            #191C1D;   /* headings + body text */
    --hr-meta:           #3F484A;   /* secondary text — 7.9:1 on surface */
    --hr-rule:           #DAE4E5;   /* hairlines and borders */
    --hr-overlay:        #002021;   /* hero gradient base */
    --hr-footer-bg:      #FFFFFF;   /* light footer per the design */
    --hr-footer-text:    #191C1D;
    --hr-footer-rule:    #DAE4E5;

    /* --- Type ------------------------------------------------------------ */
    --hr-display: 'Lexend', 'Avenir Next', 'Segoe UI', sans-serif;
    --hr-text:    'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --hr-size-body:    1.0625rem;   /* 17px */
    --hr-size-body-sm: 1rem;
    --hr-size-meta:    0.8125rem;   /* 13px, tracked */
    --hr-lh-body:      1.75;
    --hr-lh-head:      1.15;
    --hr-track-meta:   0.08em;

    --hr-h1:      clamp(2.1rem, 1.4rem + 2.4vw, 3.25rem);
    --hr-h1-hero: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
    --hr-h2:      clamp(1.6rem, 1.25rem + 1.1vw, 2rem);
    --hr-h3:      clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem);
    --hr-card-title: 1.25rem;

    /* --- Shape & metrics -------------------------------------------------- */
    --hr-radius-sm: 8px;
    --hr-radius:    12px;   /* cards */
    --hr-radius-lg: 16px;   /* hero, sidebar feature cards */
    --hr-shadow-sm: 0 1px 3px rgba(15, 30, 30, 0.06);
    --hr-shadow:    0 6px 18px rgba(15, 30, 30, 0.08);
    --hr-page-max:  1280px;
    --hr-gutter:    clamp(1rem, 3vw, 3rem);
    --hr-col-gap:   clamp(1.25rem, 2.4vw, 2rem);
    --hr-tap:       44px;
    --hr-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 Wellness 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.1rem;
    --font-size-h1-max: 3.25rem;
    --font-size-h1-fluid: calc(1.4rem + 2.4vw);
    --font-size-h2-min: 1.6rem;
    --font-size-h2-max: 2rem;
    --font-size-h2-fluid: calc(1.25rem + 1.1vw);
    --font-size-h3-min: 1.3rem;
    --font-size-h3-max: 1.5rem;
    --font-size-h3-fluid: calc(1.1rem + 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.15;

    --color-primary: #0F766E;
    --color-primary-hover: #0B5952;
    --color-heading: #191C1D;
    --color-accent: #0F766E;
    --color-text-dark: #191C1D;
    --color-text-medium: #2B3436;
    --color-text-light: #3F484A;
    --color-background: #F8FAFB;
    --color-background-light: #F1F4F5;
    --color-border-light: #DAE4E5;
    --color-border: #DAE4E5;
    --color-footer-bg: #FFFFFF;
    --color-footer-border: #DAE4E5;
    --color-footer-text: #191C1D;
    --color-copyright: #5C6B6D;

    --color-facebook: #191C1D;
    --color-facebook-hover: #0F766E;
    --color-twitter: #191C1D;
    --color-twitter-hover: #0F766E;
    --color-pinterest: #191C1D;
    --color-pinterest-hover: #0F766E;
    --color-linkedin: #191C1D;
    --color-linkedin-hover: #0F766E;

    --color-error: #BA1A1A;
    --color-error-bg: #FFDAD6;
    --color-error-text: #93000A;
    --color-warning: #8A6A1E;
    --color-warning-bg: #F5F0E2;
    --color-warning-text: #6A5117;
}