/* =========================================================
   Font: one variable file for the whole theme
   Inter 4 (opsz 14-32 = Text..Display, wght 100-900), subset to Latin, 117 KB:
   pyftsubset fonts/Inter/InterVariable.woff2 --layout-features='*' --flavor=woff2 \
     --unicodes="U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303,U+0308,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+2713,U+FEFF,U+FFFD" \
     --output-file=fonts/InterVariable-latin.woff2
   Article body text is Georgia, a system font.
   ========================================================= */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/InterVariable-latin.woff2") format("woff2");
}

/* The header and legacy.css still ask for "InterDisplay": same file, browsers pick the optical
   size from the font size */
@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/InterVariable-latin.woff2") format("woff2");
}

/* =========================================================
   Legacy palette: the header and legacy.css use it; the same in both themes
   ========================================================= */
:root {
    --dark: #1B1E28;
    --dark-light: #252936;
    --gray: #878895;
    --medium-gray: #D7DBE0;
    --light: #E9ECF0;
    --white: #FFFFFF;
    --brand: #555DFF;
    --brand2: #995CED;
}

/* =========================================================
   Theme tokens (Mubert Home, Figma "Light" / "Dark" modes)
   data-theme is set before the first paint by the inline script in header.php
   ========================================================= */
:root,
[data-theme="light"] {
    color-scheme: light;
    --c-bg: #e9ecf0;
    --c-surface: #ffffff;
    --c-surface-hover: #f3f4f7;
    --c-overlay: rgba(0, 0, 0, 0.06);
    --c-brand: #555dff;
    --c-brand-2: #995ced;
    --c-text: #1b1e28;
    --c-text-muted: #878895;
    --c-line: rgba(0, 0, 0, 0.1);
    --c-line-strong: rgba(0, 0, 0, 0.2);
    --c-shadow: rgba(85, 93, 255, 0.1);
    --c-icon: #555dff;
    --c-chip: #dadfe6;
    --c-header: rgba(255, 255, 255, 0.7);
    --c-grid: rgba(27, 30, 40, 0.09);
}

[data-theme="dark"] {
    color-scheme: dark;
    --c-bg: #1b1e28;
    --c-surface: #252936;
    --c-surface-hover: #2f3343;
    --c-overlay: rgba(255, 255, 255, 0.08);
    --c-text: #e9ecf0;
    --c-text-muted: #878895;
    --c-line: rgba(255, 255, 255, 0.1);
    --c-line-strong: rgba(255, 255, 255, 0.2);
    --c-shadow: rgba(27, 23, 33, 0.3);
    --c-icon: #9e9eff;
    --c-chip: #2f3343;
    --c-header: rgba(37, 41, 54, 0.7);
    --c-grid: rgba(255, 255, 255, 0.1);
}

/* Without JavaScript nothing sets data-theme: follow the OS */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --c-bg: #1b1e28;
        --c-surface: #252936;
        --c-surface-hover: #2f3343;
        --c-overlay: rgba(255, 255, 255, 0.08);
        --c-text: #e9ecf0;
        --c-line: rgba(255, 255, 255, 0.1);
        --c-line-strong: rgba(255, 255, 255, 0.2);
        --c-shadow: rgba(27, 23, 33, 0.3);
        --c-icon: #9e9eff;
        --c-chip: #2f3343;
        --c-header: rgba(37, 41, 54, 0.7);
        --c-grid: rgba(255, 255, 255, 0.1);
    }
}

:root {
    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;

    /* The whole type scale. Inter for UI and headings, the serif only for article text. */
    --fs-h1: clamp(32px, 1.6rem + 2.4vw, 52px);
    --fs-h2: 28px;
    --fs-h3: 20px;
    --fs-lg: 18px;
    --fs-prose: 19px;
    --fs-md: 16px;
    --fs-sm: 14px;
    --fs-xs: 12px;

    /* Two weights only */
    --fw-regular: 400;
    --fw-semibold: 600;

    --lh-tight: 1;
    --lh-snug: 1.25;
    --lh-lead: 1.4;
    --lh-normal: 1.5;

    /* Shape and motion */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --ease: 0.18s cubic-bezier(0.2, 0, 0, 1);

    /* Layout */
    --gap: 12px;
    --page-max: 1230px;
}

@media (max-width: 768px) {
    :root {
        --gap: 8px;
        --fs-h2: 24px;
        --fs-h3: 18px;
        --fs-prose: 18px;
    }
}