/* Згенеровано web/packages/ui/scripts/sync-maket.mjs з design/maket/e. НЕ ПРАВИТИ руками — правки зникнуть при наступному запуску. */
/* ZRAZU · E «Кіно» — токени обох тем. Спільний файл: правки — лише через власника дизайн-системи (див. AUTHORING.md).
   Тема: атрибут data-theme на <html> (або на будь-якому контейнері — токени переозначаються для піддерева).
   Темна — концепція за замовчуванням; світла — самостійна палітра в подачі сторінок Apple, а не інверсія.
   ПАЛІТРА (Р172-4, 28.09.2026): обидві теми — лазур → індиго → фіолет. Тепле (бурштин/персик) — лише ВИГОДА:
   --save-bg/--save-fg (бейдж знижки, суцільна заливка) і --save-ink (рядки «2 роки — … замість …»). Статуси
   (вільний/зайнятий/увага/інфо) — смислові; «інфо» сталево-синій, щоб не зливався з брендом.
   Контраст (перевірено tools/qa.py і скриптом із градієнтами й смугами; мінімуми):
   Темна (#050506 · поверхні до #17171B · плями сцени): --text 18.9 · --text-2 10.6 · --text-3 6.6 · --ghost 4.7 (плейсхолдер);
     --hue-* ≥ 8.9 на поверхнях, ≥ 6.4 на плямах; eyebrow (--beam-ink) ≥ 6.4; великий градієнт (--beam-lg) ≥ 6.4;
     кнопка: темний текст на градієнті #38BDF8 → #818CF8 → #A78BFA ≥ 6.83 (hover ≥ 10.2); вигода: --save-ink ≥ 10.5,
     бейдж ≥ 8.5.
   Світла (#F4F6FA · біле · пік поля/плями · смуги): --text 15.6 · 16.8 · ≥ 11.4 · ≥ 14.0; --text-2 8.8 · 9.5 · ≥ 6.9 · ≥ 7.9
     (AAA скрізь, крім піку плям сцени); --text-3 5.5 · 6.0 · ≥ 4.3 (плями) / ≥ 4.8 (поля) · ≥ 4.96; --hue-* ≥ 4.77 на полях і ≥ 4.93 на смугах;
     кнопка: білий на #0369A1 → #4338CA → #6D28D9 ≥ 5.93 у кожній точці (hover ≥ 7.56); великий градієнт ≥ 3.49 скрізь;
     вигода: --save-ink 7.3 на білому, ≥ 6.07 на смугах; бейдж ≥ 5.56. --ghost — лише для тексту ≥ 24 px (≥ 3:1).
   Статуси — AA і завжди разом зі словом. */

:root,
[data-theme="dark"]{
  color-scheme:dark;

  /* поверхні */
  --bg:#050506;
  --bg-2:#0B0B0E;
  --surface:#111114;                         /* суцільна картка (там, де скло не підходить: таблиці кабінету) */
  --surface-2:#17171B;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --line-3:rgba(255,255,255,.30);

  /* текст */
  --text:#F5F5F7;                            /* 18.9:1 */
  --text-2:#BCBCC4;                          /* 10.6:1 */
  --text-3:#93939C;                          /*  6.6:1 */
  --ghost:#7C7C85;                           /*  4.7:1 — плейсхолдер сцени */

  /* заливки поверх фону (прозорі) */
  --fill-1:rgba(255,255,255,.035);
  --fill-2:rgba(255,255,255,.06);
  --fill-3:rgba(255,255,255,.08);
  --fill-4:rgba(255,255,255,.14);
  --fill-sunk:rgba(0,0,0,.18);               /* «утоплена» смуга (низ картки пропозиції) */

  /* скло */
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  --glass-border:rgba(255,255,255,.10);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 40px 90px -40px rgba(0,0,0,.85);
  --glass-blur:blur(28px) saturate(150%);
  --sheen:rgba(255,255,255,.07);
  --pop-bg:rgba(18,18,22,.86);               /* кошик, меню, палітра */
  --pop-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  --hdr-bg:rgba(5,5,6,.72);
  --mnav-bg:rgba(5,5,6,.92);
  --scrim:rgba(0,0,0,.55);

  /* кнопки */
  --btn-pri-bg:#A5B4FC;                      /* суцільний під градієнтом: галочки, лічильник кошика, «Перейти до вмісту» (темний текст 10.2:1) */
  --btn-pri-fg:#050506;
  --btn-pri-hover:#C7D2FE;
  --btn-pri-glow:0 0 0 6px rgba(129,140,248,.10),0 12px 40px -10px rgba(129,140,248,.55);
  --btn-sec-bg:rgba(255,255,255,.08);
  --btn-sec-hover:rgba(255,255,255,.13);
  --btn-sec-ring:inset 0 0 0 1px var(--line-2);
  --btn-pri-img:linear-gradient(100deg,#38BDF8 0%,#818CF8 52%,#A78BFA 100%);        /* темний текст ≥ 6.8:1 у кожній точці */
  --btn-pri-img-hover:linear-gradient(100deg,#7DD3FC 0%,#A5B4FC 52%,#C4B5FD 100%);
  --btn-danger-bg:#FF9D90;
  --btn-danger-fg:#1A0705;

  /* сегменти */
  --seg-bg:rgba(255,255,255,.06);
  --seg-on:rgba(255,255,255,.14);
  --seg-thumb:rgba(255,255,255,.15);
  --seg-thumb-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.45);

  /* поля */
  --field-bg:rgba(255,255,255,.07);
  --field-border:var(--line-2);
  --field-focus:rgba(255,255,255,.4);
  --field-ring:0 0 0 5px rgba(129,140,248,.25);
  --field-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 70px -24px rgba(0,0,0,.9);

  /* код і термінал */
  --code-bg:rgba(0,0,0,.35);
  --term-bg:rgba(0,0,0,.45);

  /* скелетон */
  --sk-a:rgba(255,255,255,.06);
  --sk-b:rgba(255,255,255,.13);
  --bar-track:rgba(255,255,255,.07);
  --bar-fill:rgba(255,255,255,.26);

  /* фокус */
  --focus:#FFFFFF;

  /* статуси — завжди зі словом */
  --free:#6BE3A4;   --free-bg:rgba(107,227,164,.10);  --free-ring:rgba(107,227,164,.38);
  --taken:#FF9D90;  --taken-bg:rgba(255,157,144,.10);
  --warn:#FFC76F;   --warn-bg:rgba(255,199,111,.10);
  --info:#B4C6E0;   --info-bg:rgba(180,198,224,.10);   /* сталевий: не зливається з лазур'ю бренду */

  /* луч — акцент: лазур → індиго → фіолет (Р172-4) */
  --amber:#38BDF8; --rose:#818CF8; --violet:#A78BFA;      /* точки луча (назви історичні) */
  --beam:linear-gradient(100deg,#38BDF8 0%,#818CF8 50%,#A78BFA 100%);
  --beam-text:linear-gradient(100deg,#8FDCFF 0%,#A9B6FF 30%,#C4B5FD 55%,#8FDCFF 80%,#A9B6FF 100%);
  --beam-ink:linear-gradient(100deg,#7DD3FC 0%,#A5B4FC 50%,#C4B5FD 100%);   /* градієнт для тексту (eyebrow): ≥ 6.4:1 і на плямах сцени */
  --beam-lg:linear-gradient(100deg,#7DD3FC 0%,#A5B4FC 52%,#C4B5FD 100%);    /* великі градієнтні заголовки й цифри */
  --beam-solid:#B9C2FF;                      /* колір-запаска під градієнтним текстом (для перевірок контрасту) */
  --eyebrow-solid:#9ED8FF;
  --caret:linear-gradient(#38BDF8,#A78BFA);
  --exact-fg:#9ED8FF;
  --exact-line:rgba(56,189,248,.38);
  --accent-ic:#7DD3FC;                       /* іконки в картках «чому ми» */

  /* ВИГОДА — єдиний теплий акцент (Р172-4): бейдж знижки (суцільна тепла заливка, без іконки — формою
     відрізняється від статусу «увага») і рядки «2 роки — X ₴ замість Y ₴» / «замість». Більше ніде. */
  --save-bg:linear-gradient(100deg,#FDBA74,#FB923C);
  --save-solid:#FCA758;                      /* суцільна середина заливки (під градієнтом; по ній міряє qa.py) */
  --save-fg:#1C0A02;                         /* на заливці ≥ 8.5:1 */
  --save-ink:#FDBA74;                        /* текст вигоди ≥ 10.5:1 на поверхнях */

  /* продукти: домени — лазур, інструменти — блакитний, моніторинг і кабінет — індиго, SSL — фіолет */
  --hue-dom:#7DD3FC;  --hue-dom-bg:rgba(56,189,248,.14);
  --hue-ssl:#C4B5FD;  --hue-ssl-bg:rgba(167,139,250,.14);
  --hue-mon:#A5B4FC;  --hue-mon-bg:rgba(129,140,248,.14);
  --hue-tool:#93C5FD; --hue-tool-bg:rgba(96,165,250,.14);
  --hue-mute:#BCBCC4; --hue-mute-bg:rgba(255,255,255,.06);
  --band-ink:var(--hue-mon);
  --tone-a:56,189,248; --tone-b:129,140,248; --tone-c:167,139,250;
  --tone-ink-b:129,140,248; --tone-ink-c:167,139,250; --tone-ink-c2:167,139,250;

  /* сцена */
  --spot-a:rgba(56,160,248,.30); --spot-a2:rgba(56,160,248,.08); --spot-a0:rgba(56,160,248,0);
  --spot-b:rgba(139,108,255,.30); --spot-b2:rgba(139,108,255,.08); --spot-b0:rgba(139,108,255,0);
  --spot-c:rgba(255,255,255,.07);
  --grain-op:.07;
  --grain-blend:overlay;
  --count-grad:linear-gradient(125deg,#7DD3FC 12%,#A5B4FC 52%,#C4B5FD 92%);
  --count-solid:#C7D2FE;
  --rule:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  --plan-le-bg:linear-gradient(180deg,rgba(56,189,248,.10),rgba(167,139,250,.05) 45%,rgba(255,255,255,.02));
  --plan-le-base:#0D0D10;
  --plan-le-border:linear-gradient(160deg,rgba(56,189,248,.6),rgba(167,139,250,.5) 55%,rgba(255,255,255,.08));
  --cart-pulse:rgba(56,189,248,.55);
  --cart-pulse0:rgba(56,189,248,0);
  --notif-shadow:0 20px 40px rgba(56,150,255,.25);
}

[data-theme="light"]{
  color-scheme:light;

  --bg:#F4F6FA;                              /* холодний папір у гамі палітри */
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F9FAFD;
  --line:rgba(15,30,70,.10);
  --line-2:rgba(15,30,70,.15);
  --line-3:rgba(15,30,70,.30);

  --text:#1D1D1F;                            /* 15.6:1 на #F4F6FA */
  --text-2:#45454A;                          /*  8.8:1 */
  --text-3:#636369;                          /*  5.5:1 */
  --ghost:#7A7A80;                           /*  3.9:1 — лише великий текст */

  --fill-1:rgba(20,40,90,.028);
  --fill-2:rgba(20,40,90,.048);
  --fill-3:rgba(20,40,90,.056);
  --fill-4:rgba(20,40,90,.088);
  --fill-sunk:rgba(20,40,90,.03);

  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,255,.80));
  --glass-border:rgba(20,40,90,.09);
  --glass-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px rgba(20,40,90,.04),0 32px 70px -38px rgba(50,70,190,.30);  /* тінь кольору луча */
  --glass-blur:blur(24px) saturate(180%);
  --sheen:rgba(255,255,255,.7);
  --pop-bg:rgba(255,255,255,.95);
  --pop-shadow:0 30px 80px -24px rgba(40,50,130,.34),0 0 0 1px rgba(15,30,70,.06);
  --hdr-bg:rgba(244,246,250,.78);
  --mnav-bg:rgba(244,246,250,.97);
  --scrim:rgba(12,18,45,.32);

  --btn-pri-bg:#4338CA;                      /* суцільний під градієнтом: галочки, лічильник кошика, «Перейти до вмісту» (білий 7.9:1) */
  --btn-pri-fg:#FFFFFF;
  --btn-pri-hover:#3730A3;
  --btn-pri-img:linear-gradient(100deg,#0369A1 0%,#4338CA 52%,#6D28D9 100%);        /* білий текст ≥ 5.93:1 у кожній точці */
  --btn-pri-img-hover:linear-gradient(100deg,#075985 0%,#3730A3 52%,#5B21B6 100%);  /* ≥ 7.56:1 */
  --btn-pri-glow:0 0 0 6px rgba(79,70,229,.08),0 14px 34px -12px rgba(79,70,229,.50);
  --btn-sec-bg:rgba(255,255,255,.88);
  --btn-sec-hover:#FFFFFF;
  --btn-sec-ring:inset 0 0 0 1px rgba(15,30,70,.15);
  --btn-danger-bg:#B42318;
  --btn-danger-fg:#FFFFFF;

  --seg-bg:rgba(20,40,90,.05);
  --seg-on:#FFFFFF;
  --seg-thumb:#FFFFFF;
  --seg-thumb-shadow:0 1px 2px rgba(15,30,70,.10),0 4px 12px -2px rgba(50,70,190,.16);

  --field-bg:rgba(255,255,255,.92);
  --field-border:rgba(15,30,70,.15);
  --field-focus:rgba(67,56,202,.55);
  --field-ring:0 0 0 5px rgba(79,70,229,.16);
  --field-shadow:0 1px 0 rgba(255,255,255,.8),0 24px 60px -30px rgba(50,70,190,.30);

  --code-bg:#EDF0F6;
  --term-bg:#EFF2F8;

  --sk-a:rgba(20,40,90,.05);
  --sk-b:rgba(20,40,90,.10);
  --bar-track:rgba(40,60,160,.08);
  --bar-fill:rgba(79,70,229,.26);            /* неактивні смуги — барвінкові, активна — луч */

  --focus:#3730A3;                           /* 9.9:1 на білому, 9.2:1 на тлі */

  --free:#067647;   --free-bg:rgba(6,118,71,.09);   --free-ring:rgba(6,118,71,.35);
  --taken:#B42318;  --taken-bg:rgba(180,35,24,.08);
  --warn:#8A5300;   --warn-bg:rgba(176,108,0,.10);
  --info:#3F5A86;   --info-bg:rgba(63,90,134,.09);      /* сталево-синій: не зливається з лазур'ю й індиго бренду */

  /* луч — лазур → індиго → фіолет (Р172-4) */
  --amber:#0369A1; --rose:#4F46E5; --violet:#6D28D9;      /* точки луча (назви історичні) */
  --beam:linear-gradient(100deg,#0EA5E9 0%,#6366F1 50%,#8B5CF6 100%);
  --beam-text:linear-gradient(100deg,#0277BD 0%,#4F46E5 30%,#7C3AED 55%,#0277BD 80%,#4F46E5 100%);
  --beam-ink:linear-gradient(100deg,#0369A1 0%,#4338CA 50%,#6D28D9 100%);           /* eyebrow: ≥ 4.77:1 і на полях */
  --beam-lg:linear-gradient(100deg,#0277BD 0%,#4F46E5 52%,#7C3AED 100%);            /* лише текст ≥ 24 px: ≥ 3.49:1 скрізь */
  --beam-solid:#4338CA;
  --eyebrow-solid:#075985;
  --caret:linear-gradient(#0277BD,#7C3AED);
  --exact-fg:#075985;
  --exact-line:rgba(2,132,199,.35);
  --accent-ic:#0369A1;

  /* ВИГОДА — єдиний теплий акцент (Р172-4): бейдж знижки (суцільна тепла заливка без іконки — формою не схожий
     на статус «увага», тонований чип з іконкою) і рядки «2 роки — X ₴ замість Y ₴» / «замість». Більше ніде. */
  --save-bg:linear-gradient(100deg,#FFD7A8,#FDBA74);
  --save-solid:#FEC98E;                      /* суцільна середина заливки (під градієнтом; по ній міряє qa.py) */
  --save-fg:#7C2D12;                         /* на заливці ≥ 5.56:1 */
  --save-ink:#9A3412;                        /* текст вигоди: 7.3 на білому, ≥ 6.07 на смугах */

  --spot-a:rgba(100,190,250,.26); --spot-a2:rgba(100,190,250,.09); --spot-a0:rgba(100,190,250,0);
  --spot-b:rgba(150,120,255,.24); --spot-b2:rgba(150,120,255,.08); --spot-b0:rgba(150,120,255,0);
  --spot-c:rgba(255,255,255,.9);
  --grain-op:.035;
  --grain-blend:multiply;
  --count-grad:linear-gradient(125deg,#0277BD 12%,#4F46E5 52%,#7C3AED 92%);
  --count-solid:#4F46E5;
  --rule:linear-gradient(90deg,transparent,rgba(2,132,199,.26) 22%,rgba(79,70,229,.22) 50%,rgba(124,58,237,.26) 78%,transparent);
  --plan-le-bg:linear-gradient(180deg,rgba(100,190,250,.12),rgba(150,120,255,.07) 45%,rgba(255,255,255,0));
  --plan-le-base:#FFFFFF;
  --plan-le-border:linear-gradient(160deg,rgba(14,165,233,.7),rgba(124,58,237,.6) 55%,rgba(0,0,0,.06));
  --cart-pulse:rgba(2,132,199,.35);
  --cart-pulse0:rgba(2,132,199,0);
  --notif-shadow:0 20px 40px rgba(2,132,199,.14);

  /* продукти: один відтінок на продукт — однаково на сайті, в інструментах і в кабінеті (ніколи не зелений/червоний) */
  --hue-dom:#0369A1;  --hue-dom-bg:rgba(14,165,233,.12);    /* домени — лазур */
  --hue-ssl:#6D28D9;  --hue-ssl-bg:rgba(124,58,237,.10);    /* SSL — фіолет */
  --hue-mon:#4338CA;  --hue-mon-bg:rgba(79,70,229,.10);     /* моніторинг і кабінет — індиго */
  --hue-tool:#1D4ED8; --hue-tool-bg:rgba(37,99,235,.10);    /* інструменти — кобальт */
  --hue-mute:#45454A; --hue-mute-bg:rgba(20,40,90,.055);    /* службове (команда, налаштування) */
  /* Лише світла тема — колір по всьому скролу (читають правила під [data-theme="light"]) */
  /* активний стан: тонована капсула замість сірої */
  --accent-ink:#3730A3;                      /* на --accent-bg 8.5:1 */
  --accent-bg:rgba(79,70,229,.10);
  --accent-line:rgba(67,56,202,.34);
  --tint-warm:linear-gradient(100deg,rgba(56,189,248,.12),rgba(99,102,241,.08) 50%,rgba(150,120,255,.12));   /* назва історична: тон луча */
  --tint-th:linear-gradient(90deg,rgba(56,189,248,.10),rgba(99,102,241,.06) 50%,rgba(150,120,255,.10));
  --card-shadow:0 1px 2px rgba(20,40,90,.04),0 18px 40px -28px rgba(50,70,190,.28);
  --edge:linear-gradient(160deg,rgba(14,165,233,.55),rgba(99,102,241,.30) 45%,rgba(139,92,246,.45) 75%,rgba(15,30,70,.06));
  /* кольорові поля вздовж сторінки: тло body, плитка повторюється вниз — блакитні й фіолетові по черзі біля країв */
  --fields:radial-gradient(760px 560px at 0% 14%,rgba(56,189,248,.14),rgba(56,189,248,0) 70%),
           radial-gradient(760px 600px at 100% 38%,rgba(150,120,255,.14),rgba(150,120,255,0) 70%),
           radial-gradient(720px 560px at 0% 63%,rgba(120,130,250,.12),rgba(120,130,250,0) 70%),
           radial-gradient(760px 600px at 100% 88%,rgba(40,170,240,.13),rgba(40,170,240,0) 70%);
  --fields-h:3600px;
  --fields-y:480px;
  /* смуги секцій на всю ширину — небесна, лазурна, барвінок, лавандова, бузкова; чергуються при прокрутці.
     На кожній: --text ≥ 14.0 · --text-2 ≥ 7.9 (AAA) · --text-3 ≥ 4.96 · статуси ≥ 4.73 · --hue-* ≥ 4.93 · --save-ink ≥ 6.07 · --beam-lg ≥ 3.99 */
  --band-mon:#E3F1FC;                        /* небесна: «після оплати», моніторинг, кабінет */
  --band-dom:#E2ECFB;                        /* лазурна: домени, кошик, оплата */
  --band-price:#E7E9FC;                      /* барвінок: ціни */
  --band-ssl:#EEE9FC;                        /* лавандова: SSL */
  --band-tool:#F2E8FB;                       /* бузкова: інструменти */
  --band:var(--band-mon);                    /* смуга сторінки за замовчуванням; розділ переозначає нижче */
  --band-ink:var(--hue-mon);                 /* eyebrow і акценти смуги — колір продукту розділу */
  /* канали тонів луча для rgba(var(--tone-*),α) у правилах світлої теми */
  --tone-a:56,189,248; --tone-b:99,102,241; --tone-c:150,120,255;
  --tone-ink-b:67,56,202; --tone-ink-c:109,40,217; --tone-ink-c2:124,58,237;
  --side-a:#F4F9FE; --side-b:#F6F4FE;        /* сайдбар кабінету згори донизу */
}
@media (max-width:760px){
  [data-theme="light"]{
    --fields:radial-gradient(400px 440px at 0% 14%,rgba(56,189,248,.12),rgba(56,189,248,0) 70%),
             radial-gradient(400px 460px at 100% 38%,rgba(150,120,255,.12),rgba(150,120,255,0) 70%),
             radial-gradient(380px 440px at 0% 63%,rgba(120,130,250,.10),rgba(120,130,250,0) 70%),
             radial-gradient(400px 460px at 100% 88%,rgba(40,170,240,.11),rgba(40,170,240,0) 70%);
    --fields-h:2800px;
    --fields-y:360px;
  }
}
/* Розділ сайту → тон смуги (світла) і колір eyebrow/акценту розділу (обидві теми); data-page ставить збирач на <html> */
html[data-page^="domains/"],html[data-page^="commerce/"],html[data-page^="cabinet/domain"],html[data-page="cabinet/import"]{--band:var(--band-dom);--band-ink:var(--hue-dom)}
html[data-page^="ssl/"],html[data-page^="cabinet/ssl"]{--band:var(--band-ssl);--band-ink:var(--hue-ssl)}
html[data-page^="tools/"],html[data-page^="cabinet/plans"]{--band:var(--band-tool);--band-ink:var(--hue-tool)}
html[data-page="tools/monitoring"],html[data-page^="cabinet/monitoring"]{--band:var(--band-mon);--band-ink:var(--hue-mon)}
html[data-page="content/prices"],html[data-page^="cabinet/billing"]{--band:var(--band-price);--band-ink:var(--hue-dom)}

/* Спільне для обох тем: радіуси, рух, шрифти, розміри */
:root{
  --r-xl:32px; --r-lg:28px; --r-md:20px; --r-sm:14px; --r-xs:10px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --f:'Inter E',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JB Mono E',ui-monospace,SFMono-Regular,Menlo,monospace;
  --hdr:56px;
  --gut:24px;
  --side:248px;                              /* ширина сайдбару кабінету */
}
@media (max-width:760px){ :root{ --gut:16px } }

/* Контейнер із власною темою: <div data-theme="light"> усередині темної сторінки — фон і текст підтягуються з токенів. */
[data-theme]:not(html){ background:var(--bg); color:var(--text) }