/* Poppins, the UI font, served from assets/vendor/poppins-v24/ (plans/page-load.md
   Phase 3). Was @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'):
   an @import makes the browser wait for Google's stylesheet before it can use
   this file, and a blocked fonts.googleapis.com cost the font. These rules are
   the ones Google sent, for the Latin and Latin Extended alphabets (its third,
   Devanagari, isn't used). unicode-range: the browser downloads a file only
   when the page shows a letter in that range. font-display: swap shows text
   at once in a fallback font, then swaps in Poppins when it arrives. */

/* Poppins 400, latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/poppins-v24/poppins-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 400, latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/poppins-v24/poppins-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;
}

/* Poppins 500, latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('vendor/poppins-v24/poppins-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 500, latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('vendor/poppins-v24/poppins-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;
}

/* Poppins 600, latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('vendor/poppins-v24/poppins-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 600, latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('vendor/poppins-v24/poppins-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;
}

/* Poppins 700, latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('vendor/poppins-v24/poppins-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 700, latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('vendor/poppins-v24/poppins-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;
}

/* =============================================================================
   BASE - page-level defaults every screen inherits
   -----------------------------------------------------------------------------
   The page paints the app background and sets the text color once; every
   component inside inherits them (transparent backgrounds, color: inherit).
   Only theme roles here: var(--color-...). See docs/THEMING.md.
   ============================================================================= */

/* Typography: one UI face everywhere (same in both themes). */
:root {
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;

    /* Type scale. rem = relative to the browser's base size (16px by default),
       so text follows the user's font setting and browser zoom. To make all
       text smaller or larger, change these values; nothing else. */
    --text-2xs: 0.5rem;      /*  8px  avatar initials, micro counts */
    --text-xs: 0.625rem;     /* 10px  uppercase eyebrow labels, captions */
    --text-sm: 0.6875rem;    /* 11px  status bar, meta text, chips, counts */
    --text-base: 0.75rem;    /* 12px  labels, field values, buttons, tabs, table text */
    --text-md: 0.8125rem;    /* 13px  panel and card titles */
    --text-lg: 0.875rem;     /* 14px  section headings */
}

html,
body {
    background-color: var(--color-bg-app);
    color: var(--color-text);
    font-family: var(--font-sans);
}

/* While the theme switches (assets/theme.js), nothing animates from the old
   colors to the new ones. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: none !important;
}