/* ============================================================================
   VentCalc — дизайн-токени: ЄДИНЕ джерело правди для кольору, простору,
   типографіки й тіней. Компонентні стилі (app.css, *.razor.css) посилаються
   ЛИШЕ на ці змінні — сирих hex поза цим файлом бути не повинно.
   Заміна палітри тут переслоює всі екрани.
   ============================================================================ */

:root {
    /* --- Нейтральна шкала (холодний сірий: інженерний, не «теплий блог») --- */
    --n-0:   #ffffff;
    --n-25:  #fbfcfd;
    --n-50:  #f5f7fa;
    --n-100: #eceff4;
    --n-200: #dfe4ec;
    --n-300: #c7cfdb;
    --n-400: #97a3b4;
    /* n-500 — колір другорядного тексту (--c-muted). Обраний так, щоб дрібний
       текст проходив WCAG AA (≥4.5:1) на ВСІХ трьох фонах: сторінка --c-bg
       #f5f7fa → 5.45, картка #fff → 5.84, втоплена #fbfcfd → 5.69.
       Світліший #6b7789 давав на фоні сторінки лише 4.23 і валив axe. */
    --n-500: #5b6673;
    --n-600: #4d5768;
    --n-700: #363f4d;
    --n-800: #232b36;
    --n-900: #131920;

    /* --- Бренд: азур. Довіра + точність, читається на білому й у друку --- */
    --brand-50:  #eef4ff;
    --brand-100: #dbe6fe;
    --brand-200: #bdd1fd;
    --brand-500: #2f6fed;
    --brand-600: #1a56db;
    --brand-700: #1443ae;
    --brand-900: #0b2a6e;
    --brand-ink: #0b2a6e;

    /* --- Акцент «повітря»: аеродинамічні величини, потік, підказки --- */
    --air-50:  #e8f7f7;
    --air-500: #0e9594;
    --air-700: #0a6b6a;

    /* --- Семантика --- */
    --ok-50:   #e9f7ef;  --ok-600:   #067647;
    --warn-50: #fff4e5;  --warn-600: #b45309;  --warn-700: #8a4708;
    --err-50:  #fdecea;  --err-600:  #b42318;
    --info-50: #eef4ff;  --info-600: #1a56db;

    /* --- Ролі (усе інше посилається на них) --- */
    --c-bg:            var(--n-50);
    --c-surface:       var(--n-0);
    --c-surface-sunk:  var(--n-25);
    --c-border:        var(--n-200);
    --c-border-strong: var(--n-300);
    --c-text:          var(--n-900);
    --c-text-soft:     var(--n-700);
    --c-muted:         var(--n-500);
    --c-brand:         var(--brand-600);
    --c-brand-hover:   var(--brand-700);
    --c-on-brand:      var(--n-0);
    --c-focus:         var(--brand-500);

    /* --- Технічні схеми (SVG-креслення) ---
       Ролі ліній креслення, а не «кольори»: так схема слухається теми так само,
       як решта інтерфейсу. Раніше ці вісім значень стояли сирими hex-літералами
       в кожному з чотирьох *Preview.razor — усупереч правилу цього файлу, і в
       темній темі креслення лишалося світлим островом. */
    --dwg-ink:   var(--n-700);   /* контур корпуса, текст специфікації */
    --dwg-line:  var(--n-500);   /* розмірні лінії й стрілки */
    --dwg-thin:  var(--n-400);   /* другорядна геометрія: ламелі, ступені */
    --dwg-fill:  var(--n-100);   /* заливка тіла виробу */
    --dwg-void:  var(--n-0);     /* отвір/просвіт */
    --dwg-hatch: var(--n-100);   /* заливка перерізу (стеля, фланець) */
    --dwg-mark:  #b3543a;        /* мітки перерізу А-А і кут ламелей */
    --dwg-air:   var(--air-700); /* потік повітря */

    /* Студійне тло 3D-сцени: канвас прозорий, градієнт малює CSS.
       Свідомо темніше за картку: базовий виріб — RAL 9016, тобто майже білий,
       і на світлому тлі його силует просто зникав. */
    --viewer-1: var(--n-200);
    --viewer-2: var(--n-300);

    /* --- Типографіка --- */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

    --t-xs:   0.75rem;    /* 12 — підписи, службове */
    --t-sm:   0.8125rem;  /* 13 — вторинний текст, розбивка */
    --t-base: 0.9375rem;  /* 15 — основний */
    --t-md:   1.0625rem;  /* 17 — підзаголовки */
    --t-lg:   1.375rem;   /* 22 — заголовки секцій */
    --t-xl:   1.75rem;    /* 28 — заголовок сторінки */
    --t-price: 2.125rem;  /* 34 — головна ціна */

    --lh-tight: 1.2;
    --lh-base:  1.5;

    /* --- Простір: 4px-сітка --- */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
    --s-12: 3rem;

    /* --- Радіуси й тіні --- */
    --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-pill: 999px;

    --sh-xs: 0 1px 2px rgba(19, 25, 32, .06);
    --sh-sm: 0 1px 3px rgba(19, 25, 32, .08), 0 1px 2px rgba(19, 25, 32, .04);
    --sh-md: 0 4px 12px rgba(19, 25, 32, .08), 0 1px 3px rgba(19, 25, 32, .05);
    --sh-lg: 0 12px 32px rgba(19, 25, 32, .12);
    --ring:  0 0 0 3px var(--brand-100);

    /* --- Рух --- */
    --dur: 140ms;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* --- Каркас --- */
    --sidebar-w: 248px;
    --topbar-h: 60px;
    --content-max: 1440px;
}

/* Явно світла — щоб нативні контроли не лишались темними за системної теми. */
:root[data-theme="light"] { color-scheme: light; }

/* Темна тема: перевизначаємо ЛИШЕ ролі — компонентні стилі не змінюються.
   Сторінки друку завжди світлі (див. app.css).

   Два входи в один і той самий набір значень:
     1) `@media (prefers-color-scheme: dark)` — системна тема, працює й без JS;
     2) `:root[data-theme="dark"]` — явний вибір користувача в меню.
   Медіазапит не вміє вмикатись атрибутом, а атрибут не вміє читати системну
   тему, тож набір доводиться тримати двічі.
   ⚠ ЗМІНЮЄШ ОДИН БЛОК — ЗМІНИ Й ДРУГИЙ. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --c-bg:            #0d1219;
        --c-surface:       #151c25;
        --c-surface-sunk:  #111823;
        --c-border:        #263141;
        --c-border-strong: #34435a;
        --c-text:          #e8edf4;
        --c-text-soft:     #c3ccd9;
        --c-muted:         #8c99ab;
        --c-brand:         #6f9dff;
        --c-brand-hover:   #8bb1ff;
        --c-on-brand:      #0b1220;
        --brand-50:        #172338;
        --brand-100:       #1d2c46;
        --ok-50:   #10261c;
        --warn-50: #2a1f0d;
        --err-50:  #2b1512;
        --info-50: #172338;
        /* Семантичні акценти теж мусять мінятися: відтінки «для світлого тла»
           давали на темному 2.5–3.2:1 замість 4.5 — вердикти «Тихо/Гучно»,
           бейджі «каталог» і ADPI були нечитабельні (аудит доступності).
           Пораховано за WCAG: ці значення дають 6.6–9.7:1 на всіх своїх фонах. */
        --ok-600:   #3ddc97;
        --warn-600: #f0a94e;
        --err-600:  #ff8579;
        --info-600: #7ea6ff;
        --warn-700: #e0b568;
        /* Акцент «повітря» (криві AeroCurves, підсвітка обраної картки):
           700-й для світлого тла дає ~2.7:1 на темній поверхні — світлішаємо
           пару в тон --dwg-air (адверсарне рев'ю 04.08). */
        --air-500: #2fb3b1;
        --air-700: #4ecac8;
        /* Підкладка «повітря» теж мусить темнішати: доти вона лишалась
           світлою (#e8f7f7), а текст на ній — уже світлим --air-700, тобто
           бейдж асистента давав ~1,6:1. Знайдено власним сторожем 03.09, коли
           той почав вимагати, щоб компонентні стилі не вживали палітри, якої
           темна тема не перевизначає. З цим значенням пара дає ~7,8:1. */
        --air-50:  #102a2a;

        /* Креслення в темній темі: інверсія ролей, а не тих самих ліній на
           світлій плямі. Мітки й потік лишаються акцентами, тільки світлішими.
           Лінії підняті до значень, які раніше жили ЛОКАЛЬНИМ оверрайдом
           мініатюр каталогу (.catalog-thumb, UI/UX-прохід 18.08): на 84-px
           масштабі старі cfdae6/8fa2b5/6f8296 тонули в тлі картки, а «яскраво
           лише в мініатюрі» означало, що повнорозмірне креслення лишалося
           блідим тим самим чином. Заливка тіла світліша за поверхню картки
           (#151c25) відчутно, а не на око: стара #1a2330 від неї не
           відрізнялась, і виріб читався порожнім контуром. */
        --dwg-ink:   #e6edf5;
        --dwg-line:  #b6c5d4;
        --dwg-thin:  #93a5b8;
        --dwg-fill:  #233042;
        --dwg-void:  #121a24;
        --dwg-hatch: #2c3c50;
        --dwg-mark:  #e2937a;
        --dwg-air:   #3fc7c5;

        --viewer-1: #1b2431;
        --viewer-2: #0e151d;
        --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
        --sh-sm: 0 1px 3px rgba(0, 0, 0, .45);
        --sh-md: 0 4px 14px rgba(0, 0, 0, .5);
        --sh-lg: 0 14px 36px rgba(0, 0, 0, .6);
        --ring:  0 0 0 3px rgba(111, 157, 255, .28);
    }
}

/* Той самий набір, але за явним вибором «Темна» (див. коментар вище). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --c-bg:            #0d1219;
    --c-surface:       #151c25;
    --c-surface-sunk:  #111823;
    --c-border:        #263141;
    --c-border-strong: #34435a;
    --c-text:          #e8edf4;
    --c-text-soft:     #c3ccd9;
    --c-muted:         #8c99ab;
    --c-brand:         #6f9dff;
    --c-brand-hover:   #8bb1ff;
    --c-on-brand:      #0b1220;
    --brand-50:        #172338;
    --brand-100:       #1d2c46;
    --ok-50:   #10261c;
    --warn-50: #2a1f0d;
    --err-50:  #2b1512;
    --info-50: #172338;
    /* Ті самі акценти, що в @media вище — блоки мусять лишатися синхронними. */
    --ok-600:   #3ddc97;
    --warn-600: #f0a94e;
    --err-600:  #ff8579;
    --info-600: #7ea6ff;
    --warn-700: #e0b568;
    --air-500: #2fb3b1;
    --air-700: #4ecac8;
    --air-50:  #102a2a;

    /* Креслення в темній темі — див. коментар у @media вище: лінії з колишнього
       оверрайду мініатюр, заливка тіла відлипла від поверхні картки. */
    --dwg-ink:   #e6edf5;
    --dwg-line:  #b6c5d4;
    --dwg-thin:  #93a5b8;
    --dwg-fill:  #233042;
    --dwg-void:  #121a24;
    --dwg-hatch: #2c3c50;
    --dwg-mark:  #e2937a;
    --dwg-air:   #3fc7c5;

    --viewer-1: #1b2431;
    --viewer-2: #0e151d;
    --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --sh-md: 0 4px 14px rgba(0, 0, 0, .5);
    --sh-lg: 0 14px 36px rgba(0, 0, 0, .6);
    --ring:  0 0 0 3px rgba(111, 157, 255, .28);
}

/* Спокійніший рух для тих, хто його просив вимкнути */
@media (prefers-reduced-motion: reduce) {
    :root { --dur: 0ms; }
}