/* Опора — токены дизайн-системы. СГЕНЕРИРОВАНО из Figma kVMiIYLImWNRISxfsnr9If (переменные Color «Лёд»/«Ночь», Layout, стили) 13.10.2026.
 * Источник истины — Figma. Руками не править: менять в Figma и перегенерировать. */

:root, [data-theme="light"] {
  --opora-bg-canvas: #DBEBF8;
  --opora-bg-canvas-alt: #BDD9F0;
  --opora-bg-surface: #FFFFFF;
  --opora-bg-glass: #FFFFFFBF;
  --opora-bg-glass-strong: #FFFFFF;
  --opora-bg-nav: #FFFFFFBF;
  --opora-bg-accent: #134278;
  --opora-bg-accent-soft: #BDD9F0;
  --opora-bg-inverse: #0B1E3B;
  --opora-bg-danger: #BF3E2B;
  --opora-bg-danger-soft: #FFE6E1;
  --opora-bg-warning: #F2C94C;
  --opora-bg-success: #3CC79A;
  --opora-text-primary: #091831;
  --opora-text-secondary: #3D5A7A;
  --opora-text-tertiary: #4A6C90;
  --opora-text-accent: #134278;
  --opora-text-on-accent: #FFFFFF;
  --opora-text-on-inverse: #FFFFFF;
  --opora-text-danger: #BF3E2B;
  --opora-text-on-warning: #050D1A;
  --opora-border-glass: #FFFFFF99;
  --opora-border-default: #BDD9F0;
  --opora-border-strong: #134278;
  --opora-border-danger: #BF3E2B;
  --opora-icon-primary: #091831;
  --opora-icon-secondary: #6884A4;
  --opora-icon-accent: #134278;
  --opora-icon-on-accent: #FFFFFF;
  --opora-icon-danger: #BF3E2B;
  --opora-bg-knob: #FFFFFF;
  --opora-space-2: 2px;
  --opora-space-4: 4px;
  --opora-space-8: 8px;
  --opora-space-12: 12px;
  --opora-space-16: 16px;
  --opora-space-20: 20px;
  --opora-space-24: 24px;
  --opora-space-32: 32px;
  --opora-space-40: 40px;
  --opora-space-48: 48px;
  --opora-radius-xs: 8px;
  --opora-radius-sm: 12px;
  --opora-radius-md: 16px;
  --opora-radius-lg: 20px;
  --opora-radius-xl: 28px;
  --opora-radius-full: 999px;
  --opora-size-touch: 44px;
  --opora-stroke-hairline: 1px;
  --opora-font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --opora-shadow-glass-card: 0 8px 32px -4px #0B1E3B2E;
  --opora-shadow-glass-nav: 0 12px 40px -6px #0B1E3B47;
  --opora-shadow-floating: 0 12px 32px -6px #0B1E3B4D;
  --opora-glow-accent: 0 0 16px 0 #61A8DF8C;
  --opora-blur-card: 32px;
  --opora-blur-nav: 40px;
  color-scheme: light;
}

[data-theme="dark"] {
  --opora-bg-canvas: #050D1A;
  --opora-bg-canvas-alt: #0B1E3B;
  --opora-bg-surface: #0B2C54;
  --opora-bg-glass: #FFFFFF14;
  --opora-bg-glass-strong: #FFFFFF24;
  --opora-bg-nav: #0B1E3B;
  --opora-bg-accent: #61A8DF;
  --opora-bg-accent-soft: #0B2C54;
  --opora-bg-inverse: #FFFFFF;
  --opora-bg-danger: #FF7A66;
  --opora-bg-danger-soft: #3A1C22;
  --opora-bg-warning: #F2C94C;
  --opora-bg-success: #3CC79A;
  --opora-text-primary: #FFFFFF;
  --opora-text-secondary: #B0C6E1;
  --opora-text-tertiary: #90AFC8;
  --opora-text-accent: #61A8DF;
  --opora-text-on-accent: #050D1A;
  --opora-text-on-inverse: #050D1A;
  --opora-text-danger: #FF7A66;
  --opora-text-on-warning: #050D1A;
  --opora-border-glass: #FFFFFF24;
  --opora-border-default: #FFFFFF24;
  --opora-border-strong: #FFFFFF99;
  --opora-border-danger: #FF7A66;
  --opora-icon-primary: #FFFFFF;
  --opora-icon-secondary: #90AFC8;
  --opora-icon-accent: #61A8DF;
  --opora-icon-on-accent: #050D1A;
  --opora-icon-danger: #FF7A66;
  --opora-bg-knob: #FFFFFF;
  color-scheme: dark;
}

/* Текстовые стили (Onest) */
.t-display-number-l { font-family: var(--opora-font); font-weight: 300; font-size: 56px; line-height: 60px; letter-spacing: -1.5px; }
.t-display-number-m { font-family: var(--opora-font); font-weight: 400; font-size: 36px; line-height: 40px; letter-spacing: -0.8px; }
.t-heading-h1 { font-family: var(--opora-font); font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: -0.4px; }
.t-heading-h2 { font-family: var(--opora-font); font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: -0.2px; }
.t-heading-h3 { font-family: var(--opora-font); font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: 0px; }
.t-body-l { font-family: var(--opora-font); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0px; }
.t-body-m { font-family: var(--opora-font); font-weight: 400; font-size: 15px; line-height: 22px; letter-spacing: 0px; }
.t-body-s { font-family: var(--opora-font); font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: 0px; }
.t-label-l { font-family: var(--opora-font); font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: 0px; }
.t-label-m { font-family: var(--opora-font); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: 0.1px; }
.t-caption { font-family: var(--opora-font); font-weight: 400; font-size: 11px; line-height: 14px; letter-spacing: 0.2px; }

/* Стекло: размытие фона дорого на слабых Android в веб-окне Telegram — при отсутствии поддержки остаётся непрозрачный тон bg/surface */
.glass { background: var(--opora-bg-glass); border: 1px solid var(--opora-border-glass); backdrop-filter: blur(var(--opora-blur-card)); -webkit-backdrop-filter: blur(var(--opora-blur-card)); box-shadow: var(--opora-shadow-glass-card); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--opora-bg-surface); } }

/* Добавлено сборкой сайта (site/scripts/build.mjs) из блока [data-theme="dark"] выше: тема браузера. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --opora-bg-canvas: #050D1A;
    --opora-bg-canvas-alt: #0B1E3B;
    --opora-bg-surface: #0B2C54;
    --opora-bg-glass: #FFFFFF14;
    --opora-bg-glass-strong: #FFFFFF24;
    --opora-bg-nav: #0B1E3B;
    --opora-bg-accent: #61A8DF;
    --opora-bg-accent-soft: #0B2C54;
    --opora-bg-inverse: #FFFFFF;
    --opora-bg-danger: #FF7A66;
    --opora-bg-danger-soft: #3A1C22;
    --opora-bg-warning: #F2C94C;
    --opora-bg-success: #3CC79A;
    --opora-text-primary: #FFFFFF;
    --opora-text-secondary: #B0C6E1;
    --opora-text-tertiary: #90AFC8;
    --opora-text-accent: #61A8DF;
    --opora-text-on-accent: #050D1A;
    --opora-text-on-inverse: #050D1A;
    --opora-text-danger: #FF7A66;
    --opora-text-on-warning: #050D1A;
    --opora-border-glass: #FFFFFF24;
    --opora-border-default: #FFFFFF24;
    --opora-border-strong: #FFFFFF99;
    --opora-border-danger: #FF7A66;
    --opora-icon-primary: #FFFFFF;
    --opora-icon-secondary: #90AFC8;
    --opora-icon-accent: #61A8DF;
    --opora-icon-on-accent: #050D1A;
    --opora-icon-danger: #FF7A66;
    --opora-bg-knob: #FFFFFF;
    color-scheme: dark;
  }
}