/* Руки · дизайн-токены.
   Тёмная тема — по умолчанию. Светлая включается атрибутом data-theme="light" на <html>
   (его ставит js/theme-boot.js ещё до отрисовки: «авто» = системная тема). */

:root {
  color-scheme: dark;

  /* шрифты: только системные, без внешних CDN */
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* поверхности */
  --bg: #070b14;
  --bg-glow-a: rgba(242, 196, 92, .075);
  --bg-glow-b: rgba(183, 163, 246, .10);
  --s1: #0d1424;
  --s2: #121b30;
  --s3: #18243d;
  --s-inset: #09101f;
  --s-overlay: rgba(7, 11, 20, .72);
  --sidebar: linear-gradient(170deg, #121a2f 0%, #0a101e 70%);

  --line: rgba(148, 170, 215, .15);
  --line-strong: rgba(148, 170, 215, .30);
  --hi: rgba(255, 255, 255, .045);

  /* текст */
  --text: #e8eef9;
  --text-2: #b6c3dc;
  --muted: #8e9eba;
  --faint: #7687a9;

  /* акценты: fill — для заливок и точек, text — для текста на поверхности */
  --gold: #f2c45c;
  --gold-hi: #ffd982;
  --gold-ink: #261b05;
  --gold-text: #f2c45c;
  --gold-soft: rgba(242, 196, 92, .12);
  --gold-line: rgba(242, 196, 92, .36);

  --lilac: #b7a3f6;
  --lilac-text: #c3b3f8;
  --lilac-soft: rgba(183, 163, 246, .13);
  --lilac-line: rgba(183, 163, 246, .36);

  --green: #4fd3a0;
  --green-text: #7fe0b9;
  --green-soft: rgba(79, 211, 160, .12);
  --green-line: rgba(79, 211, 160, .34);

  --red: #f27f86;
  --red-text: #f7a1a6;
  --red-soft: rgba(242, 127, 134, .12);
  --red-line: rgba(242, 127, 134, .36);

  --blue: #6fb0ff;
  --blue-text: #9ccaff;
  --blue-soft: rgba(111, 176, 255, .12);
  --blue-line: rgba(111, 176, 255, .34);

  --focus: #c3b3f8;

  --shadow-1: 0 1px 0 var(--hi) inset, 0 10px 28px rgba(0, 0, 0, .32);
  --shadow-2: 0 1px 0 var(--hi) inset, 0 24px 60px rgba(0, 0, 0, .5);

  /* форма */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --sidebar-w: 256px;
  --topbar-h: 58px;
  --tabbar-h: 64px;
  --gutter: 32px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

  --bg: #f3f0e8;
  --bg-glow-a: rgba(229, 172, 44, .20);
  --bg-glow-b: rgba(124, 92, 214, .10);
  --s1: #ffffff;
  --s2: #faf8f2;
  --s3: #f0ecdf;
  --s-inset: #f6f3ea;
  --s-overlay: rgba(243, 240, 232, .78);
  --sidebar: linear-gradient(170deg, #fffdf8 0%, #f4f0e4 80%);

  --line: rgba(24, 34, 62, .12);
  --line-strong: rgba(24, 34, 62, .26);
  --hi: rgba(255, 255, 255, .9);

  --text: #121a2e;
  --text-2: #33415f;
  --muted: #566380;
  --faint: #66718b;

  --gold: #e5ac2c;
  --gold-hi: #f2bd45;
  --gold-ink: #2a1d00;
  --gold-text: #85570a;
  --gold-soft: rgba(229, 172, 44, .16);
  --gold-line: rgba(176, 120, 8, .40);

  --lilac: #7c5cd6;
  --lilac-text: #5b3fc4;
  --lilac-soft: rgba(124, 92, 214, .10);
  --lilac-line: rgba(91, 63, 196, .32);

  --green: #1aa57a;
  --green-text: #0c7352;
  --green-soft: rgba(26, 165, 122, .11);
  --green-line: rgba(12, 115, 82, .32);

  --red: #d9444d;
  --red-text: #ad2530;
  --red-soft: rgba(217, 68, 77, .09);
  --red-line: rgba(173, 37, 48, .32);

  --blue: #2f7be0;
  --blue-text: #1c5db3;
  --blue-soft: rgba(47, 123, 224, .09);
  --blue-line: rgba(28, 93, 179, .30);

  --focus: #5b3fc4;

  --shadow-1: 0 1px 2px rgba(24, 34, 62, .06), 0 10px 26px rgba(24, 34, 62, .07);
  --shadow-2: 0 2px 6px rgba(24, 34, 62, .08), 0 28px 60px rgba(24, 34, 62, .18);
}

@media (max-width: 1100px) { :root { --gutter: 24px; } }
@media (max-width: 820px)  { :root { --gutter: 16px; --topbar-h: 54px; } }