/*
 * Lumeo design tokens. The only place where raw colours, fonts, sizes and shadows are defined.
 * Direction: docs/design/direction.md. Contrast results: docs/design/contrast.md.
 */

/* ---- Fonts (self-hosted, Cyrillic + Latin) ---- */
@font-face { font-family: "Onest"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/onest-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/onest-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/onest-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/onest-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/onest-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/onest-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/onest-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/onest-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/unbounded-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/unbounded-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/unbounded-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/unbounded-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    /* ---- Palette: light page, dark chrome ---- */
    --color-bg: #f7f4f0;
    --color-surface: #ffffff;
    --color-surface-sunken: #efeae4;
    --color-text: #0d0d10;
    --color-text-muted: #5a5560;
    --color-border: #ddd6ce;
    --color-border-control: #837b72;

    --color-accent: #ff2e93;
    --color-accent-hover: #ff5aa9;
    --color-accent-pressed: #e61f82;
    --color-on-accent: #0d0d10;
    --color-accent-text: #bf1068;
    --color-accent-soft: #ffe3f0;

    --color-danger: #c4161c;
    --color-danger-soft: #fde4e3;
    --color-success: #0f7a4b;
    --color-success-soft: #dff3e8;
    --color-info: #1d5fa8;
    --color-info-soft: #e1edf9;

    /* Stream states */
    --color-live: #ff2e93;
    --color-on-live: #0d0d10;
    --color-break: #ffb020;
    --color-on-break: #0d0d10;
    --color-offline: #6b6670;
    --color-on-offline: #ffffff;
    --color-offline-soft: #e8e4df;
    --color-premium: #ffd43b;
    --color-on-premium: #0d0d10;

    /* Dark chrome: header, player, chat, footer */
    --color-chrome: #0d0d10;
    --color-chrome-raised: #1b1b21;
    --color-chrome-border: #34343d;
    --color-chrome-text: #f5f3f0;
    --color-chrome-muted: #aaa5b2;
    --color-scrim: rgb(13 13 16 / 0.6);

    /* Mascot Lumi: the sprite palette of docs/design/mascot/sprites.json. The amber style overrides these. */
    --mascot-body: #1a1a22;
    --mascot-body-light: #2c2c38;
    --mascot-belly: #f7f2f8;
    --mascot-accent: #ff2e93;
    --mascot-accent-shade: #d6177a;
    --mascot-pupil: #0d0d10;

    /* ---- Typography ---- */
    --font-body: "Onest", "Segoe UI", system-ui, sans-serif;
    --font-display: "Unbounded", "Onest", "Segoe UI", system-ui, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.55;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-display: 800;

    --tracking-caps: 0.06em;
    --underline-offset: 0.2em;

    /* ---- Spacing (4 px grid) ---- */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ---- Shape ---- */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-full: 999px;

    --border-width: 1px;
    --border-width-strong: 2px;

    /* ---- Elevation ---- */
    --shadow-raised: 0 1px 2px rgb(13 13 16 / 0.08), 0 4px 12px rgb(13 13 16 / 0.06);
    --shadow-overlay: 0 12px 32px rgb(13 13 16 / 0.22);
    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text);
    --focus-ring-chrome: 0 0 0 2px var(--color-chrome), 0 0 0 4px var(--color-accent);

    /* ---- Motion ---- */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-pulse: 1.6s;
    --duration-skeleton: 1.4s;
    --duration-spin: 0.8s;
    --duration-hop: 0.7s;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* ---- Sizes ---- */
    --size-control: 2.5rem;
    --size-control-sm: 2rem;
    --size-icon: 1.25rem;
    --size-icon-sm: 1rem;
    --size-avatar-sm: 1.75rem;
    --size-avatar: 2.5rem;
    --size-avatar-lg: 5rem;
    --size-header: 4rem;
    --size-touch: 2.75rem;
    --ratio-video: 16 / 9;
    --ratio-banner: 5 / 1;
    --size-auth: 28rem;
    --size-form: 48rem;
    --size-aside: 22rem;
    --size-studio-nav: 14rem;
    --size-chart: 16rem;
    --size-banner-preview: 12rem;
    --size-banner-max: 12rem;
    --size-meter: 0.75rem;
    --size-chat-emoji-max: 10rem;
    --size-profile-text-min: 12rem;
    --measure-prose: 46rem;
    --size-bell-list: 22rem;
    --size-bell-list-max: 24rem;
    --size-emoji: 2.25rem;
    --size-tile-min: 11rem;
    --size-recording: 56rem;
    --size-spec-term: 14rem;
    --size-mascot-overlay: 6rem;
    --size-mascot-stage: 32rem;
    --size-mascot-panel: 24rem;
    --mascot-default-size: 15rem;
    --mascot-size-32: 2rem;
    --mascot-size-48: 3rem;
    --mascot-size-96: 6rem;
    --mascot-size-112: 7rem;
    --mascot-size-176: 11rem;
    --mascot-size-192: 12rem;
    --mascot-size-200: 12.5rem;
    --mascot-size-288: 18rem;
    --mascot-size-320: 20rem;
    --mascot-size-352: 22rem;
    --container-max: 84rem;
    --container-gutter: var(--space-6);
    --chat-width: 22rem;
    --modal-width: 30rem;
    --size-menu-min: 9rem;
    --size-card-min: 17rem;
    --size-card-min-tight: 13rem;
    --size-search-max: 28rem;
    --measure: 28rem;
    --size-chat-min: 28rem;
    --z-sticky: 10;
    --z-dropdown: 20;
    --z-modal: 30;
}

/* Breakpoints (media queries cannot read variables): 64rem tablet, 40rem phone. */
@media (max-width: 40rem) {
    :root {
        --container-gutter: var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
    }
}