/* ============================================================================
   Better Streaming Life — tokens + self-hosted faces
   "Screening room" (house-design.md override, direction D; Stitch project
   14131693867387019047, design system assets/10962638954477988467,
   2026-09-28). Dark-first: near-black ground, raised panels, off-white type,
   amber only as thin accents. Loads FIRST, before main.css and bsl.css.
   ========================================================================= */

/* --- Faces ----------------------------------------------------------------
   Syne (variable 700–800) carries headlines, numerals and section titles;
   Plus Jakarta Sans (variable 400–700) is the reading, UI and label face.
   Both ship latin + latin-ext so diacritics never fall back mid-word. */
@font-face {
    font-family: 'Syne';
    font-style: normal;
    font-weight: 700 800;
    font-display: swap;
    src: url('../fonts/syne-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: 'Syne';
    font-style: normal;
    font-weight: 700 800;
    font-display: swap;
    src: url('../fonts/syne-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: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/plus-jakarta-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: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/plus-jakarta-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;
}

:root {
    color-scheme: dark;

    /* --- Screening-room palette (contrast measured on the ground / panel) --- */
    --bsl-ground:        #0B0F0E;   /* page ground */
    --bsl-panel:         #141A18;   /* raised panels: ledger, newsletter, ad frames, TOC */
    --bsl-panel-2:       #1B2320;   /* a second step up: table heads, code, form fields on panels */
    --bsl-rule:          #263230;   /* hairlines, frames */
    --bsl-rule-strong:   #34423F;   /* hover borders */
    --bsl-ink:           #F3F1EA;   /* headings, body, links — 17.1:1 ground / 15.6:1 panel */
    --bsl-meta:          #A9B3AE;   /* meta, labels, notes — 9.0:1 ground / 8.2:1 panel */
    --bsl-amber:         #F2A93B;   /* numerals, rules, active tab, the one button — 9.7:1 ground; never a surface except the button */
    --bsl-amber-dark:    #D9902A;   /* button hover */
    --bsl-primary:       #F3F1EA;   /* links are off-white with an amber underline on hover */
    --bsl-primary-dark:  #F2A93B;   /* link hover */
    --bsl-teal:          #2A9D8F;   /* logo only */

    /* --- Type: Syne display + numerals, Plus Jakarta Sans everything else ---- */
    --bsl-display: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bsl-ui:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bsl-text:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bsl-nav:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --bsl-size-body:    clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);   /* 17–19px */
    --bsl-size-body-sm: 1rem;
    --bsl-size-meta:    0.75rem;
    --bsl-lh-body:      1.7;
    --bsl-lh-head:      1.08;
    --bsl-track-meta:   0.1em;
    --bsl-track-head:   -0.02em;

    --bsl-h1:      clamp(2rem, 1.5rem + 1.8vw, 2.875rem);
    --bsl-title:   clamp(1.875rem, 1.35rem + 1.7vw, 2.875rem);
    --bsl-h2:      clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
    --bsl-h3:      clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --bsl-poster-title: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);

    /* --- Shape & metrics: 4px corners, hairline frames, flat ---------------- */
    --bsl-radius-sm: 3px;
    --bsl-radius:    4px;
    --bsl-radius-lg: 6px;
    --bsl-page-max:  1200px;
    --bsl-content-max: 760px;
    --bsl-sidebar:   304px;
    --bsl-side-gap:  2.5rem;
    --bsl-gutter:    clamp(1rem, 3vw, 2.5rem);
    --bsl-grid-gap:  clamp(1.25rem, 2.5vw, 2rem);
    --bsl-tap:       44px;
    --bsl-nav-tap:   48px;

    /* Kept for main.css / legacy selectors */
    --bsl-paper: #0B0F0E;
    --bsl-band:  #141A18;
    --bsl-band-border: #263230;

    /* --- Bridge to main.css -----------------------------------------------
       main.css is the shared core and names its own variables. Point every
       one at the tokens above so the core inherits the dark palette
       (comments form, entry-content basics, mobile drawer) instead of
       painting white boxes. 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: 2rem;
    --font-size-h1-max: 2.875rem;
    --font-size-h1-fluid: calc(1.5rem + 1.8vw);
    --font-size-h2-min: 1.5rem;
    --font-size-h2-max: 1.875rem;
    --font-size-h2-fluid: calc(1.25rem + 0.9vw);
    --font-size-h3-min: 1.25rem;
    --font-size-h3-max: 1.5rem;
    --font-size-h3-fluid: calc(1.1rem + 0.5vw);
    --font-size-h4-min: 1.125rem;
    --font-size-h4-max: 1.25rem;
    --font-size-h4-fluid: calc(1.05rem + 0.3vw);
    --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.08;

    --color-primary: #F2A93B;
    --color-primary-hover: #D9902A;
    --color-heading: #F3F1EA;
    --color-accent: #F2A93B;
    --color-text-dark: #F3F1EA;
    --color-text-medium: #A9B3AE;
    --color-text-light: #A9B3AE;
    --color-background: #0B0F0E;
    --color-background-light: #141A18;
    --color-background-tint: #141A18;
    --color-border: #263230;
    --color-border-soft: #263230;
    --color-footer-bg: #0B0F0E;
    --color-error: #FF7B6B;
    --color-warning: #F2A93B;

    --font-family-display: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-family-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-heading: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --border-radius: 4px;
    --border-radius-lg: 6px;
    --content-max: 760px;
    --page-max: 1200px;
    --color-border-light: #263230;
    --color-footer-border: #263230;
    --color-footer-text: #F3F1EA;
    --color-copyright: #A9B3AE;
    --color-facebook: #F3F1EA; --color-facebook-hover: #F2A93B;
    --color-twitter: #F3F1EA; --color-twitter-hover: #F2A93B;
    --color-pinterest: #F3F1EA; --color-pinterest-hover: #F2A93B;
    --color-linkedin: #F3F1EA; --color-linkedin-hover: #F2A93B;
    --color-error-bg: #2A1512; --color-error-text: #FFB4A8;
    --color-warning-bg: #2A2110; --color-warning-text: #F2A93B;
}