/* Direction А «Диспетчерская ЛТ». Every value here is mirrored in DESIGN.md front matter. */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/golos-text-cyrillic.2b8fbbb33a14.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/golos-text-latin.b20fb70bd37f.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00BB, U+00D7, U+2009, U+2010-2014, U+2018-201E, U+2022, U+2026, U+202F, U+20BD, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic.e58febde317b.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.879f812c5ef5.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00BB, U+00D7, U+2009, U+2010-2014, U+2018-201E, U+2022, U+2026, U+202F, U+20BD, U+2190-2193, U+2212;
}

:root {
  --color-qr-paper: #FFFFFF;
  --color-qr-ink: #161616;

  --color-canvas: #F2F6F6;
  --color-canvas-dark: #10272C;
  --color-surface: #FFFFFF;
  --color-surface-dark: #163238;
  --color-surface-alt: #E8F0F0;
  --color-surface-alt-dark: #1B3A40;
  --color-sidebar: #E4EDED;
  --color-sidebar-dark: #0D2328;
  --color-ink: #15343B;
  --color-ink-dark: #EDF6F6;
  --color-ink-muted: #49616A;
  --color-ink-muted-dark: #B2C5C8;
  --color-rule: #D3E0E0;
  --color-rule-dark: #2A4B51;
  --color-control: #728B92;
  --color-control-dark: #66878E;
  --color-primary: #006C73;
  --color-primary-dark: #73D5D0;
  --color-on-primary: #FFFFFF;
  --color-on-primary-dark: #10272C;
  --color-primary-soft: #DCEFEC;
  --color-primary-soft-dark: #174A4E;
  --color-primary-ink: #005A60;
  --color-primary-ink-dark: #9BE3DE;
  --color-focus: #00585E;
  --color-focus-dark: #A6EDE8;
  --color-shadow: #0B2A30;
  --color-shadow-dark: #02090B;

  --color-free: #E2F4EC;
  --color-free-dark: #183F37;
  --color-on-free: #0F5A49;
  --color-on-free-dark: #BDEBD8;
  --color-ok: #B7E1CD;
  --color-ok-dark: #204735;
  --color-on-ok: #173F30;
  --color-on-ok-dark: #D8F4E1;
  --color-warn: #FCE8B2;
  --color-warn-dark: #554415;
  --color-on-warn: #514014;
  --color-on-warn-dark: #FDE8AE;
  --color-stop: #F4C7C3;
  --color-stop-dark: #572D30;
  --color-on-stop: #60282C;
  --color-on-stop-dark: #F9D6D2;

  --font-ui: "Golos Text", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Manrope", "Golos Text", "Segoe UI", Roboto, Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;

  --radius-control: 6px;
  --radius-panel: 10px;
  --radius-badge: 4px;
  --radius-pill: 999px;

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  --sidebar-width: 216px;
  --control-height: 36px;
  --tap: 44px;
  --shadow-overlay: 0 18px 48px -12px color-mix(in srgb, var(--color-shadow) 38%, transparent);
  --shadow-raised: 0 1px 2px color-mix(in srgb, var(--color-shadow) 10%, transparent);
  color-scheme: light;
}

[data-theme=dark] {
  --color-canvas: var(--color-canvas-dark);
  --color-surface: var(--color-surface-dark);
  --color-surface-alt: var(--color-surface-alt-dark);
  --color-sidebar: var(--color-sidebar-dark);
  --color-ink: var(--color-ink-dark);
  --color-ink-muted: var(--color-ink-muted-dark);
  --color-rule: var(--color-rule-dark);
  --color-control: var(--color-control-dark);
  --color-primary: var(--color-primary-dark);
  --color-on-primary: var(--color-on-primary-dark);
  --color-primary-soft: var(--color-primary-soft-dark);
  --color-primary-ink: var(--color-primary-ink-dark);
  --color-focus: var(--color-focus-dark);
  --color-shadow: var(--color-shadow-dark);
  --color-free: var(--color-free-dark);
  --color-on-free: var(--color-on-free-dark);
  --color-ok: var(--color-ok-dark);
  --color-on-ok: var(--color-on-ok-dark);
  --color-warn: var(--color-warn-dark);
  --color-on-warn: var(--color-on-warn-dark);
  --color-stop: var(--color-stop-dark);
  --color-on-stop: var(--color-on-stop-dark);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --color-canvas: var(--color-canvas-dark);
    --color-surface: var(--color-surface-dark);
    --color-surface-alt: var(--color-surface-alt-dark);
    --color-sidebar: var(--color-sidebar-dark);
    --color-ink: var(--color-ink-dark);
    --color-ink-muted: var(--color-ink-muted-dark);
    --color-rule: var(--color-rule-dark);
    --color-control: var(--color-control-dark);
    --color-primary: var(--color-primary-dark);
    --color-on-primary: var(--color-on-primary-dark);
    --color-primary-soft: var(--color-primary-soft-dark);
    --color-primary-ink: var(--color-primary-ink-dark);
    --color-focus: var(--color-focus-dark);
    --color-shadow: var(--color-shadow-dark);
    --color-free: var(--color-free-dark);
    --color-on-free: var(--color-on-free-dark);
    --color-ok: var(--color-ok-dark);
    --color-on-ok: var(--color-on-ok-dark);
    --color-warn: var(--color-warn-dark);
    --color-on-warn: var(--color-on-warn-dark);
    --color-stop: var(--color-stop-dark);
    --color-on-stop: var(--color-on-stop-dark);
    color-scheme: dark;
  }
}