/* ============================================================================
   Bright Smart Home — tokens + self-hosted faces
   "Panel" (house-design.md override, direction A; Stitch project
   2521207797342966058, design system assets/16347778298188566579,
   2026-09-26). Loads FIRST, before main.css and bsh.css.
   ========================================================================= */

/* --- Faces ----------------------------------------------------------------
   IBM Plex Sans carries headings and navigation; Public Sans is the reading
   face; IBM Plex Mono is the label/code voice (counts, categories, meta).
   latin-ext is loaded so diacritics never fall back mid-word. */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-400-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-400-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-500-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-500-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-600-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-600-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-700-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-700-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: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/public-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: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/public-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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-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 {
    /* --- Panel palette ---------------------------------------------------- */
    --bsh-paper:         #F4F6F9;   /* page ground — cool grey; panels are white */
    --bsh-panel:         #FFFFFF;   /* panels, doors, sheets */
    --bsh-sun:           #FFC107;   /* the logo sun — strip and highlights only, never text */
    --bsh-ink:           #0F172A;   /* headings + body text */
    --bsh-primary:       #1565C0;   /* links, labels, numerals, buttons — logo blue darkened, 5.75:1 on white */
    --bsh-primary-dark:  #0D47A1;   /* hover */
    --bsh-meta:          #475569;   /* meta text — never lighter */
    --bsh-rule:          #DCE3EC;   /* hairlines, panel borders, image frames */
    --bsh-band:          #EAF2FB;   /* blue tint: contents box, table heads, step band */
    --bsh-band-border:   #BBDEFB;   /* tinted border for callouts */
    --bsh-footer-bg:     #0F172A;
    --bsh-footer-text:   #E2E8F0;
    --bsh-footer-muted:  #94A3B8;
    --bsh-footer-rule:   #1E293B;

    /* --- Type: Manrope display/UI, Inter reading ---------------------------- */
    --bsh-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bsh-ui:      'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --bsh-text:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bsh-nav:     'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --bsh-size-body:    clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);   /* 17–18px */
    --bsh-size-body-sm: 1rem;
    --bsh-size-meta:    0.75rem;     /* 12px mono labels */
    --bsh-lh-body:      1.7;
    --bsh-lh-head:      1.15;
    --bsh-track-meta:   0.08em;
    --bsh-track-head:   -0.01em;

    /* Short titles (archive, pages) may go big; article and lead headlines
       run 8–14 words in a 560–740px column, so they cap at 44px. */
    --bsh-h1:      clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
    --bsh-h1-lead: clamp(1.6rem, 1.2rem + 1.3vw, 2.25rem);
    --bsh-title:   clamp(1.6rem, 1.2rem + 1.3vw, 2.5rem);
    --bsh-h2:      clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
    --bsh-h3:      clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --bsh-card-title: 1.125rem;

    /* --- Shape & metrics: soft 8px corners, hairlines, one flat shadow at most --- */
    --bsh-radius-sm: 4px;
    --bsh-radius:    6px;
    --bsh-radius-lg: 8px;
    --bsh-page-max:  1200px;
    --bsh-content-max: 740px;
    --bsh-sidebar:   304px;   /* 300px ad unit + the frame's 1px borders */
    --bsh-side-gap:  2rem;
    --bsh-measure:   72ch;
    --bsh-gutter:    clamp(1rem, 3vw, 2.5rem);
    --bsh-col-gap:   clamp(1.5rem, 3vw, 3rem);
    --bsh-grid-gap:  clamp(1.25rem, 2.5vw, 2rem);
    --bsh-tap:       44px;
    --bsh-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 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.125rem;
    --font-size-body-fluid: calc(1rem + 0.3vw);
    --font-size-h1-min: 1.9rem;
    --font-size-h1-max: 2.5rem;
    --font-size-h1-fluid: calc(1.4rem + 1.6vw);
    --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.15;

    --color-primary: #1565C0;
    --color-primary-hover: #0D47A1;
    --color-heading: #0F172A;
    --color-accent: #1565C0;
    --color-text-dark: #0F172A;
    --color-text-medium: #475569;
    --color-text-light: #475569;
    --color-background: #F4F6F9;
    --color-background-light: #EAF2FB;
    --color-border-light: #DCE3EC;
    --color-border: #DCE3EC;
    --color-footer-bg: #0F172A;
    --color-footer-border: #1E293B;
    --color-footer-text: #E2E8F0;
    --color-copyright: #94A3B8;

    --color-facebook: #E5E7EB;
    --color-facebook-hover: #FFFFFF;
    --color-twitter: #E5E7EB;
    --color-twitter-hover: #FFFFFF;
    --color-pinterest: #E5E7EB;
    --color-pinterest-hover: #FFFFFF;
    --color-linkedin: #E5E7EB;
    --color-linkedin-hover: #FFFFFF;

    --color-error: #B91C1C;
    --color-error-bg: #FEE2E2;
    --color-error-text: #991B1B;
    --color-warning: #92400E;
    --color-warning-bg: #FEF3C7;
    --color-warning-text: #78350F;
}