/* ─── Токены. Имена зеркалят коллекцию Semantic из Figma (режим Light):
     text/* · surface/* · border/* · icon/* · accent/* · status/* · tag/*.
     Значения — палитра прототипа; при переносе в прод мапить по имени токена
     на тему продукта, а не копировать hex. Компоненты ссылаются только на
     токены — сырые значения живут в этом файле. ─── */
  :root{
    /* text/* */
    --text-primary:#1e222e;
    --text-secondary:#696e82;
    --text-tertiary:#8a90a4;

    /* surface/* */
    --surface-default:#fff;
    --surface-sunken:#f8f9fb;         /* липкие шапки/итоги таблиц */

    /* border/* */
    --border-default:#cccfde;
    --border-subtle:#f1f3f6;
    --border-focus:var(--accent-text);/* фокус-кольца (конвенция ДС) */

    /* icon/* */
    --icon-muted:#667085;

    /* accent/* */
    --accent-text:#2a68d3;
    --accent-surface:#eaf1fc;

    /* status/danger/* */
    --status-danger-accent:#e5484d;
    --status-danger-surface:#fff1f0;

    /* tag/<цвет>/{bg,text} — статусы-теги таблиц и карточек */
    --tag-gray-bg:#f1f3f6;   --tag-gray-text:#5c6579;
    --tag-blue-bg:#e7f0fd;   --tag-blue-text:#245399;
    --tag-orange-bg:#feeadd; --tag-orange-text:#93441a;
    --tag-red-bg:#ffe9e9;    --tag-red-text:#a13636;
    --tag-green-bg:#e2f6e9;  --tag-green-text:#1c6b3c;
    --tag-yellow-bg:#fdf3d3; --tag-yellow-text:#7a5c10;
    --tag-purple-bg:#ede3fe; --tag-purple-text:#5b2ea6;

    /* ─ расширения прототипа (в Figma-коллекции аналога нет) ─ */
    --accent-bright:#2e57f0;          /* насыщенный синий: активные ссылки, фокус карточки */
    --border-panel:#e2e6ee;           /* граница панелей — мягче border-default */
    --border-row:#eef0f4;             /* разделитель строк таблиц */
    --surface-hover:#f5f6f9;          /* ховер строк и пунктов */
    --surface-active:#eef2f8;         /* активный пункт меню */

    /* ─ темы фона рабочей области (расширение прототипа) ─
       вектор вместо картинок: чёткие абстракции — инлайн-SVG в data-URI (волны, грани,
       ленты, сферы, камни, акварель), мягкие (Индиго, Аврора) — стеки CSS-градиентов.
       Активную тему держит html[data-bg] → --bg-theme; выбор — в меню пользователя,
       сохранение dsBgTheme применяет инлайн-скрипт Shell.astro до первой отрисовки */
    --bgt-dune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 828' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f3ece2'/%3E%3Cstop offset='1' stop-color='%23e3d3bd'/%3E%3C/linearGradient%3E%3ClinearGradient id='w1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23faf6ee'/%3E%3Cstop offset='1' stop-color='%23e6d6bf'/%3E%3C/linearGradient%3E%3ClinearGradient id='w2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f7f0e3'/%3E%3Cstop offset='1' stop-color='%23dcc8ac'/%3E%3C/linearGradient%3E%3ClinearGradient id='w3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f5edde'/%3E%3Cstop offset='1' stop-color='%23d5bfa0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='828' fill='url(%23b)'/%3E%3Cpath d='M0 330 C220 250 430 420 700 360 C950 305 1130 220 1440 300 L1440 828 L0 828 Z' fill='url(%23w1)'/%3E%3Cpath d='M0 520 C260 420 480 590 760 520 C1030 452 1220 380 1440 470 L1440 828 L0 828 Z' fill='url(%23w2)'/%3E%3Cpath d='M0 690 C300 600 560 750 860 690 C1120 638 1280 590 1440 650 L1440 828 L0 828 Z' fill='url(%23w3)'/%3E%3C/svg%3E") center/cover no-repeat;
    --bgt-facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 828' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23bfdcd8'/%3E%3Cstop offset='.55' stop-color='%23d9e6dd'/%3E%3Cstop offset='1' stop-color='%23ead9c6'/%3E%3C/linearGradient%3E%3ClinearGradient id='p1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f4ece0' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23e8d6bd' stop-opacity='.55'/%3E%3C/linearGradient%3E%3ClinearGradient id='p2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23cfe4de' stop-opacity='.35'/%3E%3C/linearGradient%3E%3ClinearGradient id='p3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23a9d3cd' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23cbe4de' stop-opacity='.4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='828' fill='url(%23b)'/%3E%3Cpolygon points='880,-80 1560,260 1560,560 880,220' fill='url(%23p1)'/%3E%3Cpolygon points='-120,300 520,120 640,420 0,600' fill='url(%23p3)'/%3E%3Cpolygon points='300,828 760,300 1040,460 660,828' fill='url(%23p2)'/%3E%3Cpolygon points='1100,828 1360,420 1560,540 1560,828' fill='url(%23p3)'/%3E%3C/svg%3E") center/cover no-repeat;
    --bgt-breeze: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 828' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c9e0f5'/%3E%3Cstop offset='1' stop-color='%23b5d2ee'/%3E%3C/linearGradient%3E%3ClinearGradient id='r1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.25'/%3E%3C/linearGradient%3E%3ClinearGradient id='r2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23eaf4fd' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.15'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='828' fill='url(%23b)'/%3E%3Cpath d='M-60 320 C340 140 620 470 940 300 C1160 185 1330 300 1500 220 L1500 300 C1330 380 1160 265 940 380 C620 550 340 220 -60 400 Z' fill='url(%23r1)'/%3E%3Cpath d='M-60 560 C380 400 700 660 1020 520 C1240 424 1380 520 1500 460 L1500 540 C1380 600 1240 504 1020 600 C700 740 380 480 -60 640 Z' fill='url(%23r2)'/%3E%3Cpath d='M200 -60 C420 160 780 120 980 320 C1120 460 1300 480 1500 420 L1500 480 C1300 540 1080 510 940 370 C740 170 400 220 160 -60 Z' fill='url(%23r2)'/%3E%3C/svg%3E") center/cover no-repeat;
    --bgt-orbit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 828' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eceef9'/%3E%3Cstop offset='1' stop-color='%23e0e4f4'/%3E%3C/linearGradient%3E%3CradialGradient id='s1' cx='.35' cy='.3' r='.9'%3E%3Cstop offset='0' stop-color='%237f9cec'/%3E%3Cstop offset='.6' stop-color='%233f66dc'/%3E%3Cstop offset='1' stop-color='%232647b8'/%3E%3C/radialGradient%3E%3CradialGradient id='s2' cx='.35' cy='.3' r='.9'%3E%3Cstop offset='0' stop-color='%23e6ecfc'/%3E%3Cstop offset='1' stop-color='%23b9c6f0'/%3E%3C/radialGradient%3E%3CradialGradient id='s3' cx='.4' cy='.35' r='.9'%3E%3Cstop offset='0' stop-color='%239aa3b8'/%3E%3Cstop offset='1' stop-color='%235d6579'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1440' height='828' fill='url(%23b)'/%3E%3Ccircle cx='180' cy='40' r='360' fill='url(%23s2)'/%3E%3Ccircle cx='960' cy='-60' r='130' fill='url(%23s2)'/%3E%3Ccircle cx='1240' cy='130' r='150' fill='url(%23s1)'/%3E%3Ccircle cx='700' cy='180' r='26' fill='url(%23s3)'/%3E%3Ccircle cx='1050' cy='330' r='10' fill='%238fa3e8'/%3E%3C/svg%3E") center/cover no-repeat;
    --bgt-dawn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 828' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f5ddc8'/%3E%3Cstop offset='.5' stop-color='%23eee2d4'/%3E%3Cstop offset='1' stop-color='%23cfe4de'/%3E%3C/linearGradient%3E%3CradialGradient id='glow' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23f7c9a4' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23f7c9a4' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='peb1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fdf7ef'/%3E%3Cstop offset='1' stop-color='%23ecd9c6'/%3E%3C/linearGradient%3E%3ClinearGradient id='peb2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f8efe4'/%3E%3Cstop offset='1' stop-color='%23dfc8b2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='828' fill='url(%23b)'/%3E%3Cellipse cx='1130' cy='150' rx='560' ry='420' fill='url(%23glow)'/%3E%3Cellipse cx='600' cy='470' rx='185' ry='115' fill='url(%23peb2)' transform='rotate(7 600 470)'/%3E%3Cellipse cx='545' cy='370' rx='150' ry='118' fill='url(%23peb1)' transform='rotate(-14 545 370)'/%3E%3C/svg%3E") center/cover no-repeat;
    --bgt-lagoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 828' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23f2ede1'/%3E%3Cstop offset='.5' stop-color='%23ecf1e9'/%3E%3Cstop offset='1' stop-color='%23e6f0ec'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='828' fill='url(%23b)'/%3E%3Cpath d='M180 120 C340 40 620 80 660 240 C700 400 480 500 320 460 C140 415 60 200 180 120 Z' fill='%23a9dcd6' opacity='.45'/%3E%3Cpath d='M310 210 C380 120 560 140 600 240 C640 340 540 420 430 400 C300 380 250 300 310 210 Z' fill='%238fd2cc' opacity='.55'/%3E%3Cpath d='M980 240 C1120 180 1300 220 1320 340 C1340 460 1180 520 1060 480 C930 435 880 300 980 240 Z' fill='%23bfe6de' opacity='.5'/%3E%3Cpath d='M700 620 C800 560 980 590 1000 680 C1020 770 880 820 780 800 C670 775 620 670 700 620 Z' fill='%239fd8d0' opacity='.35'/%3E%3Ccircle cx='150' cy='640' r='6' fill='%232f8f83'/%3E%3Ccircle cx='230' cy='700' r='4' fill='%232f8f83' opacity='.7'/%3E%3Ccircle cx='1280' cy='520' r='7' fill='%231f9e8e'/%3E%3Ccircle cx='420' cy='90' r='4' fill='%23d86a4a' opacity='.8'/%3E%3Ccircle cx='1180' cy='120' r='5' fill='%23d86a4a' opacity='.6'/%3E%3C/svg%3E") center/cover no-repeat;
    --bgt-indigo:
      radial-gradient(31% 30% at 21% 85%, rgba(125,141,224,.6) 0%, rgba(125,141,224,.33) 55%, transparent 100%),
      radial-gradient(31% 39% at 94% 9%, rgba(159,182,240,.75) 0%, rgba(159,182,240,.41) 55%, transparent 100%),
      radial-gradient(35% 39% at 63% 57%, rgba(91,108,210,.7) 0%, rgba(91,108,210,.39) 55%, transparent 100%),
      radial-gradient(38% 48% at 17% 6%, rgba(164,180,238,.8) 0%, rgba(164,180,238,.44) 55%, transparent 100%),
      linear-gradient(135deg,#8496e4,#6f83da,#8ea6e8);
    --bgt-aurora:
      radial-gradient(24% 30% at 97% 0%, rgba(191,174,212,.7) 0%, rgba(191,174,212,.39) 55%, transparent 100%),
      radial-gradient(35% 33% at 52% 87%, rgba(216,180,200,.7) 0%, rgba(216,180,200,.39) 55%, transparent 100%),
      radial-gradient(38% 45% at 90% 57%, rgba(207,169,196,.8) 0%, rgba(207,169,196,.44) 55%, transparent 100%),
      radial-gradient(28% 36% at 42% 18%, rgba(47,120,128,.55) 0%, rgba(47,120,128,.3) 55%, transparent 100%),
      radial-gradient(42% 51% at 17% 9%, rgba(79,146,152,.8) 0%, rgba(79,146,152,.44) 55%, transparent 100%),
      linear-gradient(135deg,#a9b4d0,#b3a6c4,#c4aec6);
    --bg-theme: var(--bgt-aurora);

    /* ─ движение ─ */
    --ease-out-soft:cubic-bezier(.22,1,.36,1); /* быстрый старт, долгое мягкое торможение (expo-out) */
    --panel-anim:.32s;                          /* ход сворачивания/разворота панелей */

    /* ─ размеры и тени каркаса ─ */
    --rail-w:72px; /* зона = ширине rail: зазор иконки→контент равен зазору от края страницы (12px) */
    --menu-w:calc(var(--rail-w) + var(--inner-w, 268px));
    --shadow-header:0 9px 29px rgba(77,81,89,.05);
    --shadow-menu:0 16px 48px rgba(16,24,40,.16), 0 2px 8px rgba(16,24,40,.06);
  }

  /* активная тема фона: атрибут ставят инлайн-скрипт Shell.astro (сохранённая) и theme.js и меню пользователя (выбор) */
  html[data-bg="dune"]{--bg-theme:var(--bgt-dune)}
  html[data-bg="facets"]{--bg-theme:var(--bgt-facets)}
  html[data-bg="breeze"]{--bg-theme:var(--bgt-breeze)}
  html[data-bg="orbit"]{--bg-theme:var(--bgt-orbit)}
  html[data-bg="dawn"]{--bg-theme:var(--bgt-dawn)}
  html[data-bg="lagoon"]{--bg-theme:var(--bgt-lagoon)}
  html[data-bg="indigo"]{--bg-theme:var(--bgt-indigo)}
  html[data-bg="aurora"]{--bg-theme:var(--bgt-aurora)}