/* Дизайн-токени варіанта A «Ефір». Єдиний файл, де дозволені hex-кольори. */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/golos-text-cyrillic.024646dc00da.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 800;
  font-display: swap;
  src: url("fonts/golos-text-latin.3ba0fde64bcf.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;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-cyrillic.6465b62dd126.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.570751c5f8b4.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 {
  /* Поверхні й текст */
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #F8F9FB;
  --ink: #111318;
  --ink-hover: #2A2E37;
  --muted: #5B6270;
  --line: #E4E7EC;
  --line-strong: #C9CED6;
  --dash: #A7ADB7;
  --on-dark: #FFFFFF;

  /* Бренд */
  --brand: #2152E0;
  --brand-ink: #1A43BC;
  --brand-soft: #EAF0FF;

  /* Статуси: текст / фон */
  --ok: #0B6B40;
  --ok-bg: #E3F4EA;
  --alarm: #B3261E;
  --alarm-bg: #FCE8E6;
  --alarm-line: #F1B9B4;
  --warn: #7A5000;
  --warn-bg: #FFF1D1;
  --wait: #4A515C;
  --wait-bg: #EDEFF2;
  --yellow: #F2C200;
  --yellow-ink: #3A3000;
  --lvl-yellow-bg: #FFF4C2;
  --lvl-yellow: #5C4600;
  --live-dot: #3DDC84;

  /* Сегменти смуги статусів і легенда */
  --seg-onair: #0B6B40;
  --seg-alarm: #D9362B;
  --seg-idle: #E0A100;
  --seg-paused: #A7ADB7;
  --seg-reconnect: #6B7380;
  --seg-offline: #B3261E;
  --seg-schedule: #D3D7DE;

  /* Форма */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --sh-1: 0 1px 2px rgba(17, 19, 24, 0.06);
  --sh-2: 0 1px 2px rgba(17, 19, 24, 0.05), 0 10px 30px rgba(17, 19, 24, 0.07);
  --sh-sheet: 0 -10px 40px rgba(17, 19, 24, 0.2);
  --sh-modal: 0 30px 80px rgba(17, 19, 24, 0.3);
  --scrim: rgba(17, 19, 24, 0.45);
  --header-glass: rgba(255, 255, 255, 0.92);
  --tabbar-glass: rgba(255, 255, 255, 0.96);
  --ring-ok: 0 0 0 3px rgba(11, 107, 64, 0.18);
  --ring-brand: 0 0 0 3px rgba(33, 82, 224, 0.12);
  --ring-brand-field: 0 0 0 4px rgba(33, 82, 224, 0.14);
  --ring-ink: 0 0 0 3px rgba(17, 19, 24, 0.08);
  --ring-live: 0 0 0 4px rgba(61, 220, 132, 0.2);
  --ring-core: 0 0 0 12px rgba(33, 82, 224, 0.25);
  --hatch: rgba(255, 255, 255, 0.6);
  --on-dark-85: rgba(255, 255, 255, 0.85);
  --on-dark-18: rgba(255, 255, 255, 0.18);
  --on-dark-08: rgba(255, 255, 255, 0.08);
  --on-dark-14: rgba(255, 255, 255, 0.14);
  --ring-line-1: rgba(255, 255, 255, 0.12);
  --ring-line-2: rgba(255, 255, 255, 0.16);
  --ring-line-3: rgba(255, 255, 255, 0.2);
  --ring-line-4: rgba(255, 255, 255, 0.26);
  --ink-10: rgba(17, 19, 24, 0.1);

  /* Типографіка (fluid) */
  --font-sans: "Golos Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-big: clamp(40px, 2rem + 2.4vw, 64px);
  --fs-h1: clamp(24px, 1.1rem + 1.3vw, 38px);
  --fs-h2: clamp(18px, 0.95rem + 0.5vw, 22px);
  --fs-body: clamp(14px, 0.82rem + 0.15vw, 15px);
  --fs-small: 13px;
  --fs-eyebrow: 12px;

  /* Відступи: крок 4 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-9: 48px;
  --sp-10: 40px;
  --sp-12: 48px;
  --tap: 44px;

  /* Старі імена: аліаси на нові токени (адмінка, плеєр) */
  --surface-muted: var(--surface-2);
  --border: var(--line);
  --accent: var(--brand);
  --accent-hover: var(--brand-ink);
  --accent-soft: var(--brand-soft);
  --alert: var(--alarm);
  --ink-2: #3D434D;
  --border-strong: #D5D9E0;
  --divider: #EEF0F3;
  --focus-ring: 0 0 0 3px #DCE6FA;
  --header-bg: #15181E;
  --header-fg-muted: #C9CED6;
  --header-active-bg: #2A2F38;
  --row-warn-bg: #FFFBF2;
  --alert-border: #E5B7B3;
  --ok-border: #BFE0CC;
  --sound-alert-bg: #FDF5F4;
  --sound-alert-border: #F1C9C5;
  --sound-ok-bg: #F3FAF6;
  --sound-ok-border: #BFE0CC;
  --sound-yellow-bg: #FFF9E6;
  --sound-yellow-border: #F3DC8C;
  --warning: #E0A100;
  --dashed: #B6BCC6;

  --st-ok-fg: var(--ok);
  --st-ok-bg: var(--ok-bg);
  --st-ok-dot: #12A05C;
  --st-alert-fg: var(--alarm);
  --st-alert-bg: var(--alarm-bg);
  --st-alert-dot: #D93025;
  --st-warn-fg: var(--warn);
  --st-warn-bg: var(--warn-bg);
  --st-warn-dot: #E0A100;
  --st-wait-fg: var(--wait);
  --st-wait-bg: var(--wait-bg);
  --st-wait-dot: #8A93A0;
  --st-offline-fg: #FFFFFF;
  --st-offline-bg: var(--alarm);
  --st-offline-dot: #FFFFFF;
  --st-sched-fg: var(--muted);
  --st-sched-bg: transparent;
  --st-sched-dot: #B6BCC6;
  --st-sched-border: #B6BCC6;
  --st-change-dot: var(--brand);

  /* Плеєр (темна тема) */
  --player-bg: #0E1116;
  --player-panel: #171B22;
  --player-muted: #A6ADB8;
  --player-faint: #8D95A1;
  --plate-calm: #0B6B40;
  --plate-calm-fg: #D3F0DF;
  --plate-alert: #B3261E;
  --plate-alert-fg: #FDE2DF;
  --plate-yellow: #F2C200;
  --plate-yellow-fg: #1F1A0A;
  --live: #5BD69A;
  --paused: #5B6270;

  /* Радіуси (старі імена) */
  --r-menu: 8px;
  --r-control: 10px;
  --r-tile: 12px;
  --r-card: 14px;
  --r-pill: 999px;
  --r-player-panel: 20px;
  --r-player-plate: 28px;
  --r-player-plate-sm: 24px;
}

/* Плеєр точки (редизайн): токени в межах .player */
.player {
  --p-bg: #000000;
  --p-ink: #FFFFFF;
  --p-ink-2: rgba(255, 255, 255, 0.72);
  --p-ink-3: rgba(255, 255, 255, 0.52);
  --p-glass: rgba(255, 255, 255, 0.08);
  --p-glass-strong: rgba(255, 255, 255, 0.14);
  --p-glass-line: rgba(255, 255, 255, 0.14);
  --p-island: rgba(0, 0, 0, 0.55);
  --p-notice: rgba(40, 40, 44, 0.72);

  --p-red: #FF453A;
  --p-red-deep: #B3261E;
  --p-amber: #FFD60A;
  --p-amber-ink: #111111;
  --p-green: #30D158;
  --p-blue: #2152E0;
  --p-blue-2: #5E8BFF;

  /* фон по станах */
  --p-bg-alarm: #3A0805;
  --p-bg-yellow: #1A1200;
  --p-bg-clear: #021208;

  /* трійки кольорів світіння (c1 c2 c3) */
  --p-amb-alarm-1: #FF3B30;
  --p-amb-alarm-2: #B3261E;
  --p-amb-alarm-3: #7A0F0A;
  --p-amb-yellow-1: #FFB800;
  --p-amb-yellow-2: #FF9F0A;
  --p-amb-yellow-3: #7A4F00;
  --p-amb-clear-1: #30D158;
  --p-amb-clear-2: #0B6B40;
  --p-amb-clear-3: #19A7CE;
  --p-amb-off-1: #B3261E;
  --p-amb-off-2: #3A1714;
  --p-amb-off-3: #2A2F38;
  --p-amb-sched-1: #2A2F38;
  --p-amb-sched-2: #1E222A;
  --p-amb-sched-3: #16191F;

  /* палітра обкладинок станцій */
  --p-art-0-1: #2152E0;
  --p-art-0-2: #19A7CE;
  --p-art-0-3: #6A3DF0;
  --p-art-1-1: #FF375F;
  --p-art-1-2: #FF9F0A;
  --p-art-1-3: #BF5AF2;
  --p-art-2-1: #30D158;
  --p-art-2-2: #19A7CE;
  --p-art-2-3: #0B6B40;
  --p-art-3-1: #FF9F0A;
  --p-art-3-2: #FFD60A;
  --p-art-3-3: #FF453A;
  --p-art-4-1: #BF5AF2;
  --p-art-4-2: #5E5CE6;
  --p-art-4-3: #FF375F;
  --p-art-5-1: #64D2FF;
  --p-art-5-2: #2152E0;
  --p-art-5-3: #30D158;

  /* рух */
  --p-orbit: 600s;
  --p-amb-spin: 240s;

  /* похідні від макета: тіні, завіси, острівець, обкладинка */
  --p-shadow: rgba(0, 0, 0, 0.35);
  --p-shadow-art: rgba(0, 0, 0, 0.55);
  --p-veil-edge: rgba(0, 0, 0, 0.55);
  --p-veil-far: rgba(0, 0, 0, 0.8);
  --p-veil-clear: rgba(0, 0, 0, 0);
  --p-dim-layer: rgba(0, 0, 0, 0.35);
  --p-art-ink: rgba(255, 255, 255, 0.95);
  --p-art-gloss: rgba(255, 255, 255, 0.28);
  --p-art-gloss-end: rgba(255, 255, 255, 0);
  --p-art-rim: rgba(255, 255, 255, 0.1);
  --p-track: rgba(255, 255, 255, 0.18);
  --p-green-halo: rgba(48, 209, 88, 0.22);
  --p-red-halo: rgba(255, 69, 58, 0.25);
  --p-play-glow: rgba(255, 255, 255, 0.18);
  --p-play-ink: #000000;
  --p-capsule-ink: #111111;
  --p-shield-bg: rgba(48, 209, 88, 0.18);
  --p-attr: rgba(255, 255, 255, 0.4);
  --p-line-strong: rgba(255, 255, 255, 0.25);
  --p-halo-light: rgba(255, 255, 255, 0.25);
  --p-amber-halo: rgba(0, 0, 0, 0.15);
  --p-amber-sep: rgba(0, 0, 0, 0.2);
  --p-amber-ink-2: rgba(0, 0, 0, 0.7);
  --p-off-bg: rgba(60, 10, 8, 0.8);
  --p-off-line: rgba(255, 69, 58, 0.5);
  --p-amber-soft: rgba(255, 214, 10, 0.18);
  --p-chip-line: rgba(255, 255, 255, 0.22);
  --p-core-line: rgba(255, 255, 255, 0.35);
  --p-ring: rgba(255, 255, 255, 0.55);
  --p-amber-ring: rgba(255, 214, 10, 0.7);
  --p-amber-chip: rgba(255, 214, 10, 0.14);
  --p-amber-chip-line: rgba(255, 214, 10, 0.35);
  --p-green-line: rgba(48, 209, 88, 0.6);
  --p-cd-bg: rgba(255, 255, 255, 0.1);
  --p-veil-alarm-edge: rgba(30, 0, 0, 0.55);
  --p-veil-alarm-far: rgba(10, 0, 0, 0.85);
  --p-red-soft: rgba(255, 69, 58, 0.14);
  --p-ink-big: rgba(255, 255, 255, 0.88);
  --p-amber-badge: rgba(255, 214, 10, 0.9);
  --p-pause-bg: rgba(0, 0, 0, 0.45);
  --p-pause-line: rgba(255, 255, 255, 0.2);

  /* телефонна розкладка */
  --p-veil-ph-top: rgba(0, 0, 0, 0.25);
  --p-veil-ph-mid: rgba(0, 0, 0, 0.35);
  --p-veil-ph-bottom: rgba(0, 0, 0, 0.75);
  --p-ink-date: rgba(255, 255, 255, 0.6);
}

/* Лендинг (radioalarm.info): кольори мокапа екрана плеєра й похідні.
   Значення, що збігаються з .player { --p-… }, продубльовано: ті змінні діють лише в .player. */
.lp {
  --lp-black: #000000;
  --lp-green: #30D158; /* = --p-green */
  --lp-red: #FF3B30; /* = --p-amb-alarm-1 */
  --lp-red-2: #FF453A; /* = --p-red */
  --lp-red-deep: #7A0F0A; /* = --p-amb-alarm-3 */
  --lp-yellow: #FFB800; /* = --p-amb-yellow-1 */
  --lp-amber: #FFD60A; /* = --p-amber */
  --lp-amber-ink: #111111; /* = --p-amber-ink */
  --lp-cyan: #19A7CE; /* = --p-art-0-2 */
  --lp-violet: #6A3DF0; /* = --p-art-0-3 */
  --lp-bg-alarm: #3A0805; /* = --p-bg-alarm */
  --lp-bg-yellow: #1A1200; /* = --p-bg-yellow */
  --lp-bg-clear: #021208; /* = --p-bg-clear */
  --lp-bg-test: #050B22;
  --lp-bg-sched: #0B0D11;
  --lp-sched-glow: #2A2F38; /* = --p-amb-sched-1 */
  --lp-bezel: #1B1E24;
  --lp-bezel-edge: #2B2F37;
  --lp-btn-w-hover: #E8EAEE;
  --lp-kicker-dark: #8FAEFF;
  --lp-header-glass: rgba(244, 245, 247, 0.88);

  --lp-black-50: rgba(0, 0, 0, 0.5);
  --lp-black-55: rgba(0, 0, 0, 0.55);
  --lp-ink-05: rgba(17, 19, 24, 0.05);
  --lp-ink-07: rgba(17, 19, 24, 0.07);
  --lp-ink-10: rgba(17, 19, 24, 0.1);
  --lp-ink-12: rgba(17, 19, 24, 0.12);
  --lp-ink-18: rgba(17, 19, 24, 0.18);
  --lp-ink-25: rgba(17, 19, 24, 0.25);
  --lp-ink-30: rgba(17, 19, 24, 0.3);
  --lp-brand-14: rgba(33, 82, 224, 0.14);
  --lp-brand-25: rgba(33, 82, 224, 0.25);
  --lp-green-16: rgba(48, 209, 88, 0.16);
  --lp-green-20: rgba(48, 209, 88, 0.2);
  --lp-green-25: rgba(48, 209, 88, 0.25);
  --lp-w-10: rgba(255, 255, 255, 0.1);
  --lp-w-12: rgba(255, 255, 255, 0.12);
  --lp-w-15: rgba(255, 255, 255, 0.15);
  --lp-w-20: rgba(255, 255, 255, 0.2);
  --lp-w-25: rgba(255, 255, 255, 0.25);
  --lp-w-30: rgba(255, 255, 255, 0.3);
  --lp-w-55: rgba(255, 255, 255, 0.55);
  --lp-w-60: rgba(255, 255, 255, 0.6);
  --lp-w-65: rgba(255, 255, 255, 0.65);
  --lp-w-70: rgba(255, 255, 255, 0.7);
  --lp-w-75: rgba(255, 255, 255, 0.75);
  --lp-w-80: rgba(255, 255, 255, 0.8);
}