/* MediaServer design tokens — the shared visual language for every route.
 * Film UI Kit (claude.ai/design): тёмное матовое стекло поверх кадра,
 * тёплый графит, один оранжевый акцент, шрифт Onest. */

/* Onest (SIL OFL 1.1, static/fonts/OFL.txt) — переменный, 100–900. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/onest-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/onest-latin-wght.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;
}

:root {
  color-scheme: dark;
  --color-canvas: #171615;
  --color-surface: #211f1e;
  --color-surface-raised: #2a2826;
  --color-surface-strong: #363432;
  --color-surface-deep: #100f0e;
  --color-rule: rgb(255 255 255 / 0.16);
  --color-rule-soft: rgb(255 255 255 / 0.1);
  --color-image-rule: rgb(255 255 255 / 0.1);
  --color-scrim: rgb(14 13 12 / 0.66);
  --color-text: #fff;
  --color-text-muted: rgb(255 255 255 / 0.64);
  --color-text-subtle: rgb(255 255 255 / 0.8);
  --color-accent: #ff9a3d;
  --color-accent-hover: #ffb066;
  --color-accent-ink: #141312;
  --color-light: #fff;
  --color-light-hover: #edeae6;
  --color-danger: #ff6b5e;
  --color-danger-soft: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));
  --color-danger-rule: color-mix(in srgb, var(--color-danger) 42%, transparent);
  --color-warning: #ffc857;
  --color-success: #5bd68a;
  --color-focus: #ff9a3d;
  /* Стекло: панель · контрол · активное. */
  --glass-panel: rgb(255 255 255 / 0.07);
  --glass-control: rgb(255 255 255 / 0.1);
  --glass-hover: rgb(255 255 255 / 0.16);
  --glass-active: rgb(255 255 255 / 0.18);
  --glass-rule: rgb(255 255 255 / 0.12);
  --glass-blur: blur(40px);
  --glass-blur-soft: blur(24px);
  /* Фокус для экрана телевизора (ТВ-сессия в браузере). */
  --color-focus-tv: #fff;
  --shadow-focus-tv: 0 0 0 8px rgb(255 154 61 / 0.35);
  --font-display: "Onest", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Onest", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, ui-monospace, monospace;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-h2: 1.625rem;
  --text-display: clamp(2.25rem, 6vw, 4rem);
  --radius-badge: 8px;
  --radius-control: 14px;
  --radius-card: 28px;
  --radius-panel: 36px;
  --radius-pill: 999px;
  --page-max: 87.5rem;
  --page-gutter: clamp(1rem, 3vw, 2rem);
  --shadow-tight: 0 18px 40px rgb(0 0 0 / 0.32);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 150ms;
}