@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* =============================================================================
   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;
}