/* ============================================================
   СГЕНЕРИРОВАНО из tokens/foundation.json (npm run tokens).
   Руками не править: правки — в JSON, затем npm run tokens.
   ============================================================ */

:root {
  /* ── Цвет ── */
  /* canvas */
  --bg: #000000;
  --text: #ffffff;
  --text1: #ffffff; /* канон-имя заголовков/иконок (CLAUDE.md); до 2026-08-20 нигде не объявлялся */
  --text2: rgba(255, 255, 255, 0.70);
  --text3: rgba(255, 255, 255, 0.35);
  /* semantic */
  --green: #2DD4A0;
  --green-rgb: 45, 212, 160;
  --blue: #5BB8F5;
  --blue-rgb: 91, 184, 245;
  --purple: #A78BFA;
  --purple-rgb: 167, 139, 250;
  --pink: #FF3DAD;
  --pink-rgb: 255, 61, 173;
  --orange: #FB923C;
  --orange-rgb: 251, 146, 60;
  /* status */
  --err: #FF3B30;
  --red: #FF3B30;
  --red-rgb: 255, 59, 48;
  --green-tint: rgba(45, 212, 160, 0.16);
  --green-rim: rgba(45, 212, 160, 0.55);
  --red-tint: rgba(255, 59, 48, 0.16);
  --red-rim: rgba(255, 59, 48, 0.55);
  --negative: #FF3B30;
  --negative-rgb: 255, 59, 48;
  --positive: #2DD4A0;
  --positive-rgb: 45, 212, 160;
  --danger-soft: #EB5E55;
  --danger-soft-rgb: 235, 94, 85;
  /* accent */
  --primary: var(--cigi-gold);
  --primary-rgb: var(--cigi-gold-rgb);
  --cigi-accent: var(--cigi-amber); /* Єдиний акцент CIGI — той самий, що в кнопці «До кошика» */
  --cigi-accent-rgb: var(--cigi-amber-rgb);
  /* palette */
  --cigi-gold: #FCD763;
  --cigi-gold-rgb: 252, 215, 99;
  --cigi-amber: #F59E0B;
  --cigi-amber-rgb: 245, 158, 11;
  --cigi-text-accent: #FBBF24; /* Фігма {колір/текст/акцент} = amber-400: підписи рядків, «Разом» (Борис 09.10) */
  --cigi-text-accent-rgb: 251, 191, 36;
  --cigi-emerald: #10B981;
  --cigi-emerald-rgb: 16, 185, 129;
  --cigi-royal: #3B82F6;
  --cigi-royal-rgb: 59, 130, 246;
  --cigi-ink-2: rgba(255, 255, 255, 0.6);
  --cigi-ink-3: rgba(255, 255, 255, 0.4);
  --cigi-violet: #8B5CF6;
  --cigi-violet-rgb: 139, 92, 246;
  --cigi-hit: #A855F7; /* Фігма {колір/бейдж/хіт} */
  --cigi-hit-rgb: 168, 85, 247;
  --cigi-toggle-knob: #fff;
  --cigi-on-accent: #000000;
  /* platform */
  --pf-youtube: #FF3D3D;
  --pf-youtube-rgb: 255, 61, 61;
  --pf-instagram: #E1306C;
  --pf-instagram-rgb: 225, 48, 108;
  --pf-telegram: #27A7E7;
  --pf-telegram-rgb: 39, 167, 231;
  --pf-x: #E7E9EA;
  --pf-x-rgb: 231, 233, 234;
  --pf-facebook: #1877F2;
  --pf-facebook-rgb: 24, 119, 242;
  /* surface */
  --inp-bg: #0a0a0a;
  --inp-brd: #181818;
  --border: rgba(255, 255, 255, 0.08);
  /* rank */
  --rank-bronze: #D89860;
  --rank-silver: #C8D0DD;
  --rank-gold: #FCD763;
  --rank-platinum: #CFE2F2;
  --rank-emerald: #2DD4A0;
  --rank-sapphire: #5BB8F5;
  --rank-ruby: #FF7AC2;
  --rank-amethyst: #B87FFF;
  --rank-diamond: #B9F2FF;
  --rank-legend: #FCD763;
  --rank-partner: #4FD6D0;
  --rank-mentor: #9FB6E8;
  --rank-tycoon: #FBB374;
  --rank-elite: #C084FC;

  /* ── Шрифт ── */
  /* family */
  --font-ui: 'Inter', -apple-system, sans-serif;
  --font-display: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif;
  --font: var(--font-ui);
  --font2: var(--font-display);
  /* weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  /* line-height */
  --lh-flat: 1;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  /* letter-spacing */
  --ls-tight: -0.2px;
  --ls-wide: 0.5px;
  --ls-label: 1.2px;
  --ls-overline: 1.5px;

  /* ── Шкала размеров ── */
  --fs-display: 34px; /* = 7 ступенів канону (tailwind.config.js, docs/CIGI_TYPOGRAPHY.md): 10·12·14·16·20·26·34. Окремої шкали тут немає. */
  --fs-h1: 26px;
  --fs-h2: 20px;
  --fs-h3: 20px;
  --fs-title: 16px;
  --fs-body-lg: 14px;
  --fs-body: 14px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-micro: 12px;
  --fs-2xs: 10px;
  --fs-overline: 10px;

  /* ── Скругления ── */
  --r-sheet: 28px;
  --r-xs: 10px;
  --r-sm: 12px;
  --r-card: 14px;
  --r-block: 16px;
  --r-panel: 18px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 30px;
  --r-bar: 2px; /* столбик волны голосового */
  --r-bar-wave: 6px; /* фокус-рамка волны */
  --r-xxs: 6px;
  --r-cap-sm: 15px;
  --r-cap-md: 17px;
  --r-menu: 22px;

  /* ── Стекло ── */
  --glass-bg: rgba(40, 40, 44, 0.14);
  --glass-blur: 5px;
  --glass-blur-lg: 5px;
  --glass-blur-1: 5px;
  --glass-blur-2: 5px;
  --glass-blur-3: 5px;
  --glass-bg-nested: rgba(40, 40, 44, 0.14);
  --glass-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --glass-shadow-btn: 0 2px 10px rgba(0, 0, 0, 0.4);
  --glass-shadow-btn-hover: 0 4px 14px rgba(0, 0, 0, 0.5);
  --glass-border: 1px;
  --glass-dim: saturate(180%);
  --glass-toned-bg: rgba(36, 36, 40, 0.9); /* «Тоноване» скло — меню, тости, підказки, сповіщення (Борис 12.10): темне, не прозоре */
  --glass-toned-blur: 20px;
  --text-shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.55);
  --rim-a: 90deg;
  --rim-white: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.14) 32%, rgba(255, 255, 255, 0.14) 68%, rgba(255, 255, 255, 0.24) 100%);
  --rim-white-soft: var(--rim-white);
  --rim-white-all: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.24) 100%); /* Обводка по всьому периметру (без прозорих кутів) — панель пошуку. */
  --cigi-rim: linear-gradient(var(--rim-a), rgba(var(--cigi-accent-rgb), 0.65) 0%, rgba(var(--cigi-accent-rgb), .25) 25%, rgba(var(--cigi-accent-rgb), .25) 75%, rgba(var(--cigi-accent-rgb), 0.65) 100%);
  --rim-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  /* ── Размеры оболочки ── */
  --app-max: 480px;
  --shell-panel-w: 360px;
  --fab-panel-w: 460px;

  /* ── Движение ── */
  --spring: cubic-bezier(.34, 1.45, .64, 1);

  /* ── Віолетта · чат (#/violetta) ── */
  --vi-blue-soft: #93BBFA;
  --vi-orbit-bg: radial-gradient(120% 70% at 50% 38%, rgb(16 26 52), #000 72%);
  --vi-w12: rgb(255 255 255 / 12%);
  --vi-fs-11: 11px;
  --vi-fs-13: 13px;
  --vi-fs-30: 30px;
  --vi-font-cond: 'Oswald', 'Inter', sans-serif;

  /* ── Вложения мессенджера (ms-attach.css) ── */
  --at-scrim: rgba(0, 0, 0, 0.4);
  --at-sheet-bg: rgba(0, 0, 0, 0.55);
  --at-pv-bg: rgba(0, 0, 0, 0.97);
  --at-badge-bg: rgba(0, 0, 0, 0.35);
  --at-ring-bg: rgba(255, 255, 255, 0.25);
  --at-placeholder: rgba(255, 255, 255, 0.45);
  --at-dark: #111111;

  /* ── Мессенджер ── */
  /* actions */
  --ms-accent: #60A5FA;
  --ms-out-solid: #0F1B30; /* исходящий пузырь, плотный (подсказки-фразы с хвостиком) */
  --ms-out-rim: rgba(156, 189, 245, 0.45);
  --ms-accent-soft: #93C5FD;
  --ms-accent-glow: rgba(96, 165, 250, 0.55);
  --ms-danger: #F87171;
  --ms-danger-soft: #FCA5A5;
  --ms-ink-2: #B8B8BD;
  --ms-muted: #8E8E93;
  --ms-scrim: rgba(0, 0, 0, 0.45);
  --ms-scrim-42: rgba(0, 0, 0, 0.42);
  --ms-scrim-50: rgba(0, 0, 0, 0.5);
  --ms-scrim-88: rgba(0, 0, 0, 0.88);
  --ms-wash-7: rgba(255, 255, 255, 0.07);
  --ms-wash-9: rgba(255, 255, 255, 0.09);
  --ms-wash-30: rgba(255, 255, 255, 0.3);
  --ms-wash-40: rgba(255, 255, 255, 0.4);
  --ms-sel-22: rgba(59, 130, 246, 0.22);
  --ms-sel-40: rgba(59, 130, 246, 0.4);
  --ms-hl: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.26) 18%, rgba(96, 165, 250, 0.26) 82%, transparent);
  --ms-rx-me-bg: linear-gradient(rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0.28)), var(--ms-scrim);
  /* shared */
  --ms-scrim-75: rgba(0, 0, 0, 0.75);
  --ms-card-bg: rgba(8, 8, 10, 0.94);
  --ms-wash-6: rgba(255, 255, 255, 0.06);
  --ms-wash-8: rgba(255, 255, 255, 0.08);
  --ms-badge-muted: #5B5B60;
  --ms-offline: #6B6B70;
  --ms-online: #4ADE80;
  --ms-hit: rgba(250, 204, 21, 0.28);
  --ms-hit-cur: rgba(250, 204, 21, 0.7);
  /* profile */
  --mp-hero-bg: radial-gradient(120% 90% at 50% 18%, rgba(96, 165, 250, 0.38), rgba(88, 28, 135, 0.34) 55%, #000 100%);
  --mp-hero-fade: linear-gradient(transparent 48%, rgba(0, 0, 0, 0.55) 78%, #000 100%);
  --mp-screen-fade: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 110px) top / 100% 110px no-repeat, linear-gradient(to top, #000 0, #000 88px, rgba(0, 0, 0, 0) 170px) bottom / 100% 170px no-repeat;

  /* ── Голосовые ── */
  --voice-bar: rgba(255, 255, 255, 0.32); /* непрослушанная часть волны */
  --voice-bar-out: #CFE0FF; /* прослушанная часть волны в исходящем */

  /* ── Каталог компонентов (css/pages/ds.css) ── */
  --ds-dim: rgba(0, 0, 0, 0.55);
  --ds-rim: rgba(255, 255, 255, 0.12);
  --ds-rim-on: rgba(var(--cigi-accent-rgb), 0.55);
  --ds-pad: rgba(255, 255, 255, 0.03);
  --ds-code: rgba(255, 255, 255, 0.07);
  --toast-bg: rgba(0, 0, 0, 0.72);

  /* ── Служебные переменные анимаций (меняются из JS) ── */
  --tx: 0px;
  --ty: 0px;
  --rot: 0deg;
  --fill: #fcd763;
  --draw-progress: 0;
  --tour-rgb: 252, 215, 99;
  --gt-arrow-pos: 0;

  /* ── Блоки DEVIL-DS (css/ds/blocks.css): стекло + кромка + общая тень ── */
  --halo: 0 0 2px 2px #000;
  --blk-fill: rgba(0, 0, 0, 0.45);
  --blk-fill-dark: rgba(0, 0, 0, 0.72);
  --blk-filter: blur(var(--glass-blur)) saturate(120%) brightness(120%);
  --blk-scrim: rgba(0, 0, 0, 0.55);
  --blk-white-rgb: 255, 255, 255;
  --blk-line: rgba(255, 255, 255, 0.07);
  --blk-hover: rgba(255, 255, 255, 0.04);
  --blk-press: rgba(255, 255, 255, 0.08);
  --blk-gray-rgb: 142, 142, 147;
  --r-row: 32px; /* строка списка 64: круг 48 + отступ 8 → 32 − 8 = 24 */

  /* ── DS: данные, шаги, подсказка, фон, ПК (css/ds-data.css, css/ds/*.css) ── */
  --dv-glass: rgb(0 0 0 / 45%);
  --dv-glass-card: rgb(0 0 0 / 65%);
  --dv-halo: 0 0 2px 2px #000;
  --dv-fill: 10%;
  --dv-rim: linear-gradient(125deg, rgb(255 255 255 / 65%) 0%, rgb(255 255 255 / 6%) 30%, rgb(255 255 255 / 3%) 65%, rgb(255 255 255 / 50%) 100%);
  --dv-neu: #F5F5F5;  --dv-neu-rgb: 255 255 255;
  --dv-pos: #4ADE80;  --dv-pos-rgb: 34 197 94;
  --dv-acc: #F5A524;  --dv-acc-rgb: 245 158 11;
  --dv-neg: #F87171;  --dv-neg-rgb: 239 68 68;
  --dv-info: #4CC2FF; --dv-info-rgb: 42 171 238;
  --dv-vio: #F472B6;  --dv-vio-rgb: 244 114 182;
  --dv-warn: #FACC15; --dv-warn-rgb: 250 204 21;
  --dv-bg-black: #000;
  --r-pc-side: 32px; /* сайдбар ПК */
  --r-pc-top: 36px; /* хедер ПК */

  /* ── Состояния экрана (css/states.css) ── */
  --st-sk-line: rgba(255, 255, 255, 0.08);
  --st-sk-glint: rgba(255, 255, 255, 0.18);
  --st-sk-sweep: linear-gradient(100deg, transparent 20%, var(--st-sk-glint) 50%, transparent 80%);
  --st-gold-tint: rgba(var(--cigi-accent-rgb), 0.10);
  --st-gold-rim: rgba(var(--cigi-accent-rgb), 0.55);

  /* ── DS: формы и ввод (css/ds/forms.css) ── */
  --f-glass: rgba(0, 0, 0, 0.45);
  --f-glass-on: rgba(0, 0, 0, 0.55);
  --f-shadow: 0 0 2px 2px #000;
  --f-tone-fill: 0.1;
  --f-focus: rgba(255, 255, 255, 0.85);
  --f-tick: rgba(255, 255, 255, 0.28);
  --f-field-bg: rgba(255, 255, 255, 0.035);
  --f-tint-accent: linear-gradient(rgba(var(--cigi-accent-rgb), var(--f-tone-fill)), rgba(var(--cigi-accent-rgb), var(--f-tone-fill)));
  --f-tint-red: linear-gradient(rgba(var(--red-rgb), var(--f-tone-fill)), rgba(var(--red-rgb), var(--f-tone-fill)));
  --f-tint-green: linear-gradient(rgba(var(--green-rgb), var(--f-tone-fill)), rgba(var(--green-rgb), var(--f-tone-fill)));
  --f-bg-err: var(--f-tint-red), var(--f-field-bg);
  --f-bg-ok: var(--f-tint-green), var(--f-field-bg);
  --f-bg-on: var(--f-tint-accent), var(--f-glass-on);
  --f-bg-in: var(--f-tint-accent), var(--f-glass);
  --f-rim-green: linear-gradient(135deg, rgba(var(--green-rgb), 0.85) 0%, rgba(var(--green-rgb), 0.35) 50%, rgba(var(--green-rgb), 0.75) 100%);
  --f-ct-bg: rgba(255, 255, 255, 0.08);
  --f-ct-on: rgba(var(--cigi-accent-rgb), 0.3);
  --f-meter-1: #FF3B30;
  --f-meter-2: #F59E0B;
  --f-meter-3: #5BB8F5;
  --f-meter-4: #2DD4A0;

  /* ── Кузня · пульт (css/pages/kz.css) ── */
  --kz-font-num: 'Oswald', 'Inter', sans-serif; /* цифры, проценты, время */
  --kz-bar-bg: rgba(255, 255, 255, 0.08); /* дорожка шкалы */
  --kz-bar-fill: rgba(255, 255, 255, 0.85); /* заполнение шкалы — тихий белый (норма не кричит) */
  --kz-work: #ECEBE8; /* работает — тёплый белый */
  --kz-sleep: rgba(255, 255, 255, 0.35); /* спит / в очереди — серый */
  --kz-tone-fill: 10%; /* заливка тона */
  --kz-num-m: 20px; /* цифры в строке: проценты, итоги */
  --kz-num-l: 24px; /* цифры в плитках-счётчиках */
  --kz-wait-fill: rgba(var(--cigi-accent-rgb), .10); /* ждёт — заливка круга (тон 10%) */
  --kz-r-flask: 36px; /* колба: круг 48 у края + отступ 12 → радиус 24 + 12 */
}