/* Цвета, шрифты и размеры оформления. Вёрстка в site.css использует только эти переменные. */

:root {
  --font-display: "Onest", "Segoe UI", system-ui, sans-serif;
  --font-body: "Onest", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
  --bg: #f3f1f4; --surface: #ffffff; --surface-2: #f0f2f6; --ink: #161a22; --muted: #566072; --link: #4a2fdc;
  --line: #e3e6ec; --field-edge: #7b8496;
  --accent: #5b3df5; --accent-hover: #4c30e0; --accent-ink: #ffffff; --accent-soft: #eeebff; --accent-text: #4a2fdc;
  --btn: #ffffff; --btn-edge: #d9dde5; --btn-ink: #161a22; --btn-hover: #f0f2f6;
  --hint: #e8ebf1; --hint-ink: #414b5c;

  --gold: #fff0c7; --badge-ink: #614200;
  --newbie: #d9f4e3; --newbie-ink: #115a35;
  --red: #fde6e4; --on-red: #9c1f16;
  --done: #d9f4e3; --done-ink: #115a35;
  --good: #12964a; --good-soft: #d9f4e3; --bad: #db3a2e; --bad-soft: #fde6e4; --idle-soft: #e8ebf1;
  --warn-bg: #fff0c7; --warn-ink: #614200;

  --xp-track: #e3e6ec; --xp-value: #5b3df5;
  --mark: #ffe89e; --mark-ink: #161a22;
  --tip-bg: #1d2230; --tip-ink: #f5f6f8; --tip-muted: #c5cbd8;
  --pop-bg: #ffffff; --pop-ink: #161a22; --pop-muted: #566072; --pop-hover: #eeebff;
  --focus: #4a2fdc;

  --top-bg: #ffffff; --top-edge: #e3e6ec; --brand-ink: #161a22; --menu-ink: #414b5c; --menu-on: #4a2fdc; --menu-on-bg: #eeebff; --menu-hover: #f0f2f6;
  /* Шапка поверх панорамы. Полоса плотная там, где стоит текст, поэтому белый читается и на белых облаках */
  --top-ink: #ffffff;
  --top-band: linear-gradient(rgb(10 32 76 / .9), rgb(12 38 90 / .76) 42px, rgb(14 44 104 / .7) 52px, rgb(14 44 104 / .44) 60px, rgb(14 44 104 / 0));
  --top-hover: rgb(91 61 245 / .55); --top-hover-ring: inset 0 0 0 1px rgb(255 255 255 / .6);
  --top-on-bg: linear-gradient(#6f50ff, #5233ea);
  --top-on-glow: inset 0 1px 0 rgb(255 255 255 / .28), 0 0 16px rgb(111 80 255 / .6), 0 2px 8px rgb(6 16 48 / .35);
  --top-on-glow-hover: inset 0 1px 0 rgb(255 255 255 / .28), 0 0 0 1px rgb(255 255 255 / .6), 0 0 22px rgb(111 80 255 / .85);
  --top-card: #10275a; --top-pill: rgb(12 26 60 / .62); --top-pill-edge: rgb(255 255 255 / .14);
  --top-focus-gap: #0b1f4d;
  --top-logo-edge: #efeaff; --top-logo-glow: 0 0 14px rgb(111 80 255 / .65);
  --top-face: linear-gradient(135deg, #2590e2, #1670c4); --top-face-edge: #5cc8ff;
  --foot-bg: transparent;
  --sky-top: #b9dcfa; --sky-low: #e8f4fc;

  --chart-bar: #5b3df5; --chart-sel: #161a22; --chart-down: #e0574c; --chart-grid: #eceef3; --chart-bg: transparent;

  --radius: 16px; --radius-md: 12px; --radius-sm: 8px; --radius-xs: 6px; --radius-pill: 999px; --radius-icon: 14px; --bar-radius: 3px;
  --edge-w: 1px; --divider-w: 1px; --panel-edge: #e6e9ef;
  --panel-shadow: 0 0 0 1px rgb(60 50 80 / .09), 0 0 5px rgb(60 50 80 / .08), 0 5px 18px rgb(60 50 80 / .10);
  --pop-shadow: 0 4px 12px rgb(22 26 34 / .10), 0 16px 48px rgb(22 26 34 / .16);
  --field-shadow: 0 1px 2px rgb(22 26 34 / .04), 0 8px 24px rgb(22 26 34 / .06);
  /* Поиск лежит на панораме: тёмная граница видна на облаках, белая заливка или обводка на тёмной части картинки */
  --hero-edge: #3d25c7; --hero-on: #ffffff;
  --hero-shadow: 0 1px 3px rgb(22 26 34 / .24), 0 8px 22px rgb(22 26 34 / .30);
  --hero-shadow-hover: 0 2px 4px rgb(22 26 34 / .28), 0 12px 30px rgb(22 26 34 / .40);
  --hero-ring: 0 0 0 3px var(--hero-on), 0 0 0 6px var(--accent);
  --hero-title: #ffffff;
  --hero-title-glow: 2px 0px 1px #1b3a8f, -2px 0px 1px #1b3a8f, 0px 2px 1px #1b3a8f, 0px -2px 1px #1b3a8f, 1.5px 1.5px 1px #1b3a8f, -1.5px 1.5px 1px #1b3a8f, 1.5px -1.5px 1px #1b3a8f, -1.5px -1.5px 1px #1b3a8f, 0 3px 8px rgb(16 32 96 / .7), 0 0 14px rgb(16 32 96 / .4);
  --focus-style: solid;
  --tracking: -.02em;
  --icon-edge: -10px;
}