/* ============================================================================
   Retirement in USA — tokens + self-hosted faces
   Direction C "Broadsheet". Loads FIRST, before main.css and riu.css.
   ========================================================================= */

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

@font-face {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/libre-franklin-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: 'Libre Franklin';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/libre-franklin-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: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/source-serif-4-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: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/source-serif-4-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: 'Source Serif 4';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/source-serif-4-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;
}

:root {
    /* --- Broadsheet palette -------------------------------------------- */
    --riu-paper:        #FCFBF7;   /* newsprint, page ground */
    --riu-ink:          #101010;   /* black, all body and heading text */
    --riu-accent:       #9C2B23;   /* oxblood: kickers, links, active nav */
    --riu-accent-dark:  #7C201A;   /* hover */
    --riu-rule:         #D5D3CC;   /* 1px column rules and hairlines */
    --riu-band:         #F0EEE7;   /* tonal band */
    --riu-meta:         #4A4A46;   /* meta text — 8.3:1 on paper, never lighter */
    --riu-footer-bg:    #101010;
    --riu-footer-text:  #FCFBF7;
    --riu-footer-rule:  #3A3A36;

    /* --- Type ----------------------------------------------------------- */
    --riu-display: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --riu-text:    'Source Serif 4', Georgia, 'Times New Roman', serif;

    /* Reading floor for a 55+ audience. Body never drops below 17px. */
    --riu-size-body:    1.1875rem;   /* 19px */
    --riu-size-body-sm: 1.0625rem;   /* 17px — the absolute floor */
    --riu-size-meta:    0.875rem;    /* 14px, uppercase + tracked */
    --riu-lh-body:      1.7;
    --riu-lh-head:      1.05;
    --riu-track-meta:   0.1em;

    --riu-h1:      clamp(2.6rem, 1.6rem + 3.1vw, 4rem);
    --riu-h1-lead: clamp(2.9rem, 1.7rem + 3.7vw, 4.5rem);
    --riu-h2:      clamp(1.75rem, 1.3rem + 1.4vw, 2.125rem);
    --riu-h3:      clamp(1.4rem, 1.15rem + 0.8vw, 1.65rem);
    --riu-card:    clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem);

    /* --- Metrics --------------------------------------------------------- */
    --riu-page-max:  1280px;
    --riu-gutter:    clamp(1rem, 3vw, 2.5rem);
    --riu-col-gap:   clamp(1.25rem, 2.4vw, 2.25rem);
    --riu-rule-heavy: 3px;
    --riu-tap:       44px;   /* minimum interactive target */
    --riu-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 Broadsheet tokens above so the core inherits the
       palette instead of fighting it. Do not restyle main.css.
       ------------------------------------------------------------------ */
    --font-size-body-min: 1.0625rem;
    --font-size-body-max: 1.1875rem;
    --font-size-body-fluid: calc(1rem + 0.35vw);
    --font-size-h1-min: 2.6rem;
    --font-size-h1-max: 4rem;
    --font-size-h1-fluid: calc(1.6rem + 3.1vw);
    --font-size-h2-min: 1.75rem;
    --font-size-h2-max: 2.125rem;
    --font-size-h2-fluid: calc(1.3rem + 1.4vw);
    --font-size-h3-min: 1.4rem;
    --font-size-h3-max: 1.65rem;
    --font-size-h3-fluid: calc(1.15rem + 0.8vw);
    --font-size-h4-min: 1.25rem;
    --font-size-h4-max: 1.4rem;
    --font-size-h4-fluid: calc(1.1rem + 0.4vw);
    --font-size-h5-min: 1.125rem;
    --font-size-h5-max: 1.25rem;
    --font-size-h5-fluid: calc(1rem + 0.3vw);
    --font-size-h6-min: 1.0625rem;
    --font-size-h6-max: 1.125rem;
    --font-size-h6-fluid: calc(1rem + 0.15vw);
    --line-height-body: 1.7;
    --line-height-heading: 1.05;

    --color-primary: #9C2B23;
    --color-primary-hover: #7C201A;
    --color-heading: #101010;
    --color-accent: #9C2B23;
    --color-text-dark: #101010;
    --color-text-medium: #2C2C29;
    --color-text-light: #4A4A46;
    --color-background: #FCFBF7;
    --color-background-light: #F0EEE7;
    --color-border-light: #D5D3CC;
    --color-border: #D5D3CC;
    --color-footer-bg: #101010;
    --color-footer-border: #3A3A36;
    --color-footer-text: #FCFBF7;
    --color-copyright: #9C9A92;

    --color-facebook: #101010;
    --color-facebook-hover: #9C2B23;
    --color-twitter: #101010;
    --color-twitter-hover: #9C2B23;
    --color-pinterest: #101010;
    --color-pinterest-hover: #9C2B23;
    --color-linkedin: #101010;
    --color-linkedin-hover: #9C2B23;

    --color-error: #9C2B23;
    --color-error-bg: #F7EFEE;
    --color-error-text: #7C201A;
    --color-warning: #8A6A1E;
    --color-warning-bg: #F5F0E2;
    --color-warning-text: #6A5117;
}
