/* RemotePanel - дизайн-система, единственный источник значений.
   Правило: новые компоненты берут ТОЛЬКО эти токены. Сырые hex/px допустимы
   в этом файле (здесь они и заданы), в правилах 1px-линий и в media-запросах.
   Палитры трёх тем перенесены из themes.css без изменения значений. */

/* --- Шрифты: Unbounded (дисплей) + Onest (интерфейс), локальные, вариативные,
       кириллица проверена по cmap. Источники: jenil/fonts Unbounded (OFL),
       Onest (OFL); см. assets/fonts/OFL.txt. Manrope больше не используется. --- */
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/unbounded-var.woff2") format("woff2");
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/onest-var.woff2") format("woff2");
}

/* --- Палитры тем ------------------------------------------------------ */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080808;
  --panel: #111111;
  --panel2: #1A1A1A;
  --border: #303030;
  --text: #F5F5F5;
  --muted: #A2A2AB;
  --subtle: #898992;
  --accent: #F5F5F5;
  --on-accent: #171717;
  --control-border: #62626C;
  --focus: #F5F5F5;
  --success: #6DD3AC;
  --success-soft: #152D24;
  --error: #FFA4B2;
  --error-soft: #341D24;
  --warning: #E2B581;
  --warning-soft: #2C2519;
  --overlay: rgb(0 0 0 / 64%);
  --shadow: 0 12px 48px rgb(0 0 0 / 20%);
  --shadow-1: 0 1px 0 rgb(0 0 0 / 45%);
  --shadow-2: 0 6px 18px rgb(0 0 0 / 30%);
  --shadow-float: 0 18px 50px rgb(0 0 0 / 48%);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F4F5;
  --panel: #FFFFFF;
  --panel2: #F3F3F5;
  --border: #E3E3E7;
  --text: #171717;
  --muted: #5B5B67;
  --subtle: #61616D;
  --accent: #171717;
  --on-accent: #FFFFFF;
  --control-border: #868691;
  --focus: #171717;
  --success: #18764F;
  --success-soft: #ECF8F1;
  --error: #AD2341;
  --error-soft: #FBEFF2;
  --warning: #8B5B1D;
  --warning-soft: #FBF3E7;
  --overlay: rgb(24 24 28 / 28%);
  --shadow: 0 12px 48px rgb(24 24 28 / 12%);
  --shadow-1: 0 1px 2px rgb(24 24 28 / 7%);
  --shadow-2: 0 8px 22px rgb(24 24 28 / 6%);
  --shadow-float: 0 18px 44px rgb(24 24 28 / 15%);
}
html[data-theme="cute"] {
  color-scheme: light;
  --bg: #FFF1F6;
  --panel: #FFF8FB;
  --panel2: #FFE4F0;
  --border: #FFB4D2;
  --text: #3B2530;
  --muted: #6E4B59;
  --subtle: #765060;
  --accent: #FF70AD;
  --on-accent: #391325;
  --switch-on: #E0427F;
  --control-border: #AF6989;
  --focus: #9B2C5E;
  --success: #126A50;
  --success-soft: #E8F5F0;
  --error: #AE204E;
  --error-soft: #FCE3EB;
  --warning: #885B26;
  --warning-soft: #FCEDDC;
  --overlay: rgb(54 26 39 / 30%);
  --shadow: 0 12px 48px rgb(91 40 61 / 12%);
  --shadow-1: 0 1px 2px rgb(91 40 61 / 14%);
  --shadow-2: 0 8px 22px rgb(91 40 61 / 10%);
  --shadow-float: 0 18px 44px rgb(91 40 61 / 18%);
}

/* --- Подтемы: акцент поверх палитры -----------------------------------
   Акцент перекрашивает главные кнопки, маркер навигации, переключатели и
   живой фон (--accent, --accent-deep, --acid-300 читает aurora.js).
   Графит — значение по умолчанию, то есть прежняя монохромная тема. */
html[data-theme="dark"],
html:not([data-theme]) {
  --accent-deep: #6E6E7A;
  --acid-300: #FFFFFF;
}
html[data-theme="dark"][data-accent="violet"] { --accent: #B49BFF; --on-accent: #150E28; --accent-deep: #5133C8; --acid-300: #D9CCFF; }
html[data-theme="dark"][data-accent="mint"] { --accent: #6FE0B6; --on-accent: #04231A; --accent-deep: #12775A; --acid-300: #C2F7E3; }
html[data-theme="dark"][data-accent="amber"] { --accent: #F3C271; --on-accent: #251705; --accent-deep: #A8701F; --acid-300: #FBE3B8; }
html[data-theme="dark"][data-accent="rose"] { --accent: #FFA2BE; --on-accent: #2B0C18; --accent-deep: #B93A5F; --acid-300: #FFD2DF; }

html[data-theme="light"] {
  --accent-deep: #8A8A96;
  --acid-300: #3B3B45;
}
html[data-theme="light"][data-accent="violet"] { --accent: #5A3CD6; --on-accent: #FFFFFF; --accent-deep: #3A2496; --acid-300: #7E5CFF; }
html[data-theme="light"][data-accent="mint"] { --accent: #0E7355; --on-accent: #FFFFFF; --accent-deep: #149070; --acid-300: #17A67E; }
html[data-theme="light"][data-accent="amber"] { --accent: #96610F; --on-accent: #FFFFFF; --accent-deep: #C08A2E; --acid-300: #C9971F; }
html[data-theme="light"][data-accent="rose"] { --accent: #AC2346; --on-accent: #FFFFFF; --accent-deep: #C85272; --acid-300: #D0335C; }

html[data-theme="cute"] {
  --accent-deep: #C2377A;
  --acid-300: #FFC2DD;
}

/* --- Шкалы, типографика, движение, слои ------------------------------- */
:root {
  --fg: var(--text);

  /* CSS-viewport, не разрешение монитора: DPR/масштаб ОС не удваивают UI.
     От 16px на обычном экране до 24.8px при 3840 CSS px, максимум 26px.
     rem сохраняет единый масштаб всех шрифтов, иконок и контролов. */
  --ui-size: clamp(16px, calc(8px + .4375vw), 26px);
  --font-display: Unbounded, "Segoe UI", system-ui, sans-serif;
  --font-ui: Onest, "Segoe UI", system-ui, sans-serif;
  --fs-11: .6875rem;
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-15: .9375rem;
  --fs-17: 1.0625rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --fw-regular: 400;
  --fw-medium: 520;
  --fw-semibold: 650;
  --fw-bold: 750;

  /* Шаг сетки: базовые 4 / 8 / 12 / 16 / 24, масштабируется согласованно. */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-section: 2rem;
  --sp-panel: 2rem;

  --r-panel: .875rem;
  --r-inner: .625rem;
  --r-pill: 999px;
  --r-dialog: 1.125rem;
  --r-kbd: .375rem;

  /* Каркас растёт с окном, формы сохраняют читаемую длину строки. */
  --control-height: 2.5rem;
  --row-height: 3rem;
  --shell: 126rem;
  /* Высота, которую занимает не страница: нижний таб-бар на узких экранах. */
  --viewport-chrome: 0px;
  --rail-w: 11.5rem;
  /* Свёрнутое меню: остаются только иконки. */
  --rail-mini: 4.5rem;
  --topbar-h: 4.5rem;
  --tabbar-h: 4.25rem;
  --gutter: clamp(1.5rem, 4vw, 7rem);
  --page-top: clamp(2rem, 4vh, 4rem);
  --settings-width: 74rem;
  --form-width: 26.25rem;
  --dialog-width: 28rem;
  --builder-width: 58rem;
  --meta-width: 17rem;
  --copy-width: 65ch;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --focus-width: .125rem;
  --focus-offset: .1875rem;
  --sr-size: 1px;
  --icon-sm: .9375rem;
  --icon-base: 1.125rem;
  --icon-nav: 1.25rem;
  --icon-lg: 2rem;
  --logo-size: 4rem;
  --logo-mobile: 2.75rem;
  --logo-login: 4.5rem;
  --dot-size: .375rem;
  --count-size: 1.375rem;
  --nav-marker: .1875rem;
  --nav-height: 3.25rem;
  --heading-height: 3.75rem;
  --switch-w: 3rem;
  --switch-track-w: 2.75rem;
  --switch-track-h: 1.5rem;
  --switch-knob: 1.125rem;
  --switch-left: .125rem;
  --switch-knob-left: .3125rem;
  --switch-travel: 1.25rem;
  --check-size: 1.125rem;
  --table-select-w: 3.75rem;
  --table-actions-w: 6.5rem;
  --table-mobile-min: 42rem;
  --table-chrome-h: 19rem;
  --table-min-h: 12rem;
  --empty-height: 14rem;
  --viewer-empty-h: 23rem;
  --viewer-max-h: 70svh;
  --stream-min-w: 24rem;
  --log-min-h: 12rem;
  --log-time-w: 4.75rem;
  --log-level-w: 6rem;
  --log-max-h: 65svh;
  --skeleton-h: 3.25rem;
  --skeleton-bar: .4375rem;
  --summary-height: 12rem;
  --builder-height: 24rem;
  --journal-min-h: 18rem;
  --login-min-h: 26rem;
  --motion-rise: .625rem;
  --brand-shadow: none;

  /* Движение */
  --dur-fast: 140ms;
  --dur-base: 180ms;
  --dur-enter: 220ms;
  --dur-slow: 320ms;
  --theme-dur: 420ms;
  --stagger: 50ms;
  /* Сильный ease-out: мгновенный старт, мягкое торможение. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-ui: var(--ease-out);
  --press: .97;

  /* Слои поверхностей: фон -> панель -> вложенная -> заголовок панели -> hover */
  --surface-0: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--panel2);
  --surface-3: color-mix(in srgb, var(--panel) 93%, var(--text) 7%);
  --surface-hover: color-mix(in srgb, var(--panel2) 90%, var(--text) 10%);
  --surface-inline: color-mix(in srgb, var(--panel2) 55%, transparent);
  --border-soft: color-mix(in srgb, var(--border) 60%, transparent);
  --border-hover: color-mix(in srgb, var(--border) 45%, var(--text) 55%);
  --border-line: 1px solid var(--border);

  /* Z-слои */
  --z-bg: 0;
  --z-art: 1;
  --z-content: 2;
  --z-sticky: 3;
  --z-banner: 4;
  --z-overlay: 10;

  /* Образцы трёх тем для переключателя оформления (единственное место,
     где палитры соседних тем нужны одновременно) */
  --demo-dark-bg: #111111;
  --demo-dark-fg: #F5F5F5;
  --demo-dark-border: #303030;
  --demo-light-bg: #FFFFFF;
  --demo-light-fg: #171717;
  --demo-light-border: #E3E3E7;
  --demo-cute-bg: #FFE4F0;
  --demo-cute-fg: #9B2C5E;
  --demo-cute-border: #FFB4D2;
}
/* От 1360px у широкого окна появляется свободное поле, в котором живёт фирменный
   персонаж (background.css прячет его, если поле уже 120px). Симметрично рейлу:
   от правого края рейла до панели и от панели до края окна - одинаковый отступ. */
@media (min-width: 1360px) {
  :root { --gutter: clamp(8rem, 9.4vw, 10rem); }
}
@media (max-width: 1099px) {
  :root { --viewport-chrome: calc(var(--tabbar-h) + var(--safe-bottom)); }
}
@media (max-width: 1024px), (pointer: coarse) {
  :root { --control-height: 2.75rem; --row-height: 3.25rem; }
}
@media (max-width: 700px) {
  :root {
    --gutter: 1rem;
    --page-top: 1.5rem;
    --sp-panel: 1.5rem;
    --sp-section: 1.5rem;
    --heading-height: 3.5rem;
    --viewer-empty-h: 18rem;
    --summary-height: 0rem;
    --builder-height: 20rem;
  }
}
@media (max-width: 390px) {
  :root { --gutter: .75rem; --sp-panel: 1rem; --sp-5: 1.25rem; }
}