/* ============================================================================
   Nutrition in USA — tokens + self-hosted faces
   (ntu-theme, Stitch pick "A · Nutrition Facts", 2026-10-22)
   Loaded first; main.css reads the --color-* / --font-size-* bridge below,
   ntu.css reads the --nt-* tokens.
   ========================================================================= */

/* --- Faces: Roboto Flex (variable: weight 700–900, width 75–100%) for
       headlines, labels and the label panels; Arimo 400–700 + 400 italic for
       reading text. latin + latin-ext, Google Fonts css2, 2026-10-22. ------ */
@font-face {
    font-family: 'Roboto Flex';
    font-style: normal;
    font-weight: 700 900;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url('../fonts/roboto-flex-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto Flex';
    font-style: normal;
    font-weight: 700 900;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url('../fonts/roboto-flex-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: 'Arimo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/arimo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/arimo-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: 'Arimo';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/arimo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Arimo';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/arimo-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 {
    color-scheme: light;
    /* --- Palette: white paper, black ink for headings and the label rules,
       ONE cobalt for everything interactive. No tints beyond the cool grey
       panel. WCAG: #1F4FB0 on #FFFFFF 7.49 · on #F3F5F9 6.86 ·
       #5A5F66 on #FFFFFF 6.32 · on #F3F5F9 5.79 · #FFFFFF on #1F4FB0 7.49 ·
       #2A2A2A on #FFFFFF 14.4 */
    --nt-ground:       #FFFFFF;   /* page */
    --nt-panel:        #F3F5F9;   /* newsletter, takeaways, ad ground, footer */
    --nt-rule:         #D9DDE3;   /* hairlines */
    --nt-rule-soft:    #E8EBEF;
    --nt-ink:          #111111;   /* headlines + heavy label rules */
    --nt-text:         #2A2A2A;   /* reading text */
    --nt-meta:         #5A5F66;
    --nt-cobalt:       #1F4FB0;   /* links, buttons, active nav, labels */
    --nt-cobalt-dark:  #183E8A;
    --nt-cobalt-soft:  #E8EEFA;

    /* --- Type ---------------------------------------------------------------- */
    --nt-display: 'Roboto Flex', 'Arial Narrow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --nt-body:    'Arimo', Arial, 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
    --nt-stretch: 88%;           /* the label's slightly condensed headline width */
    --nt-size-body: clamp(1.0625rem, 1.01rem + 0.3vw, 1.1875rem);   /* 17–19px */
    --nt-lh-body:   1.7;
    --nt-lh-head:   1.1;
    --nt-title: clamp(2.125rem, 1.6rem + 2vw, 2.875rem);   /* article + archive H1, capped 46px */
    --nt-h2:    clamp(1.625rem, 1.35rem + 1vw, 2.125rem);
    --nt-h3:    clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --nt-label: 0.8125rem;

    /* --- The label's rules ---------------------------------------------------- */
    --nt-bar-xl: 10px;   /* under a panel title */
    --nt-bar-lg: 8px;    /* above section heads and article H2s */
    --nt-bar-md: 5px;    /* closes a panel / group */
    --nt-frame:  2px;    /* panel border */

    /* --- Shape & metrics ------------------------------------------------------ */
    --nt-radius:    4px;
    --nt-page-max:  1320px;
    --nt-sidebar:   320px;
    --nt-gutter:    clamp(1rem, 3vw, 2rem);

    /* --- Bridge to main.css (do not restyle main.css) ------------------------- */
    --font-size-body-min: 1.0625rem;
    --font-size-body-max: 1.1875rem;
    --font-size-body-fluid: calc(1.01rem + 0.3vw);
    --font-size-h1-min: 2.125rem;
    --font-size-h1-max: 2.875rem;
    --font-size-h1-fluid: calc(1.6rem + 2vw);
    --font-size-h2-min: 1.625rem;
    --font-size-h2-max: 2.125rem;
    --font-size-h2-fluid: calc(1.35rem + 1vw);
    --font-size-h3-min: 1.25rem;
    --font-size-h3-max: 1.5rem;
    --font-size-h3-fluid: calc(1.15rem + 0.4vw);
    --font-size-h4-min: 1.125rem;
    --font-size-h4-max: 1.25rem;
    --font-size-h4-fluid: calc(1.08rem + 0.2vw);
    --font-size-h5-min: 1.0625rem;
    --font-size-h5-max: 1.125rem;
    --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.7;
    --line-height-heading: 1.1;
    --color-primary: #1F4FB0;
    --color-primary-hover: #183E8A;
    --color-heading: #111111;
    --color-accent: #1F4FB0;
    --color-text-dark: #2A2A2A;
    --color-text-medium: #5A5F66;
    --color-text-light: #5A5F66;
    --color-background: #FFFFFF;
    --color-background-light: #F3F5F9;
    --color-background-tint: #F3F5F9;
    --color-border: #D9DDE3;
    --color-border-soft: #D9DDE3;
    --color-footer-bg: #F3F5F9;
    --color-error: #B42318;
    --color-warning: #8A5A00;
    --font-family-display: 'Roboto Flex', 'Arial Narrow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-family-body: 'Arimo', Arial, 'Helvetica Neue', sans-serif;
    --font-family: 'Arimo', Arial, 'Helvetica Neue', sans-serif;
    --radius-sm: 4px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --border-radius: 4px;
    --border-radius-lg: 4px;
    --content-max: 780px;
    --page-max: 1320px;
    --color-border-light: #D9DDE3;
    --color-footer-border: #111111;
    --color-footer-text: #111111;
    --color-copyright: #5A5F66;
    --color-facebook: #1F4FB0; --color-facebook-hover: #183E8A;
    --color-twitter: #1F4FB0; --color-twitter-hover: #183E8A;
    --color-pinterest: #1F4FB0; --color-pinterest-hover: #183E8A;
    --color-linkedin: #1F4FB0; --color-linkedin-hover: #183E8A;
    --color-error-bg: #F9E3E0; --color-error-text: #8A1C12;
    --color-warning-bg: #F6EBD2; --color-warning-text: #6B4600;
    --font-primary: 'Arimo', Arial, 'Helvetica Neue', sans-serif;
    --font-heading: 'Roboto Flex', 'Arial Narrow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}