/* ============================================================
   re:premium — design tokens
   Источник бренда: репликация живого сайта repremium.ru
   Структура/принципы: Apple Human Interface Guidelines
   Шрифты: Manrope (body), Bounded (display)
   ============================================================ */
:root{
  /* —— COLOR · текст (ink) —— */
  --color-ink:        #111111; /* основной текст */
  --color-ink-2:      #6a6a6a; /* вторичный */
  --color-ink-3:      #9291a1; /* третичный/placeholder */
  --color-on-action:  #ffffff;
  --color-on-dark:    #f9f9fb;

  /* —— COLOR · поверхности —— */
  --color-canvas:     #f9f9fb; /* фон страницы */
  --color-surface:    #ffffff; /* карточки/панели */
  --color-surface-2:  #f1f1f4; /* подложка */
  --color-line:       #c7c6cc; /* границы/разделители */

  /* —— COLOR · бренд-акценты —— */
  --color-action:     #e81717; /* ОСНОВНОЙ CTA (красный) */
  --color-action-600: #c81212; /* hover/pressed */
  --color-action-tint:#fde7e9; /* мягкая красная подложка */
  --color-accent:     #6f42f5; /* фиолетовый акцент (ссылки, выделение) */
  --color-accent-tint:#efeaff;
  --color-warm-tint:  #ffefe6; /* тёплая подложка hero-карточек */

  /* —— COLOR · тёмные поверхности (футер/тёмные секции) —— */
  --color-dark:       #1e1b35;
  --color-dark-2:     #121020;
  --color-navy:       #262343;

  /* —— COLOR · статусы (выведены под бренд, согласовать) ——
     Яркий цвет (success/warning/danger) — для точек/заливок/индикаторов.
     -tint — мягкая подложка бейджа; -ink — читаемый ТЕКСТ на светлом/тинте (контраст AA ≥ 4.5:1).
     Для danger как ТЕКСТ на светлом используй --color-action-600. */
  --color-success:     #1faa59;
  --color-success-tint:#e9f7ef; /* мягкая зелёная подложка */
  --color-success-ink: #15803d; /* success как текст (AA) */
  --color-warning:     #f5a623;
  --color-warning-tint:#fff3e0; /* мягкая янтарная подложка */
  --color-warning-ink: #8a5a00; /* warning как текст (AA) */
  --color-danger:      #e81717;
  --color-danger-tint: #fde7e9; /* = --color-action-tint (danger == action) */

  /* —— TYPOGRAPHY —— */
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Bounded", "Manrope", var(--font-sans);
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  /* шкала (по мотивам Apple type scale) */
  --text-caption:12px; --text-footnote:13px; --text-subhead:14px;
  --text-body:16px;    --text-callout:18px;  --text-title3:20px;
  --text-title2:24px;  --text-title1:32px;   --text-large:40px;
  --text-display:56px;
  --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5;

  /* —— RADIUS (мягкая геометрия repremium) —— */
  --radius-xs:8px; --radius-sm:12px; --radius-md:16px;
  --radius-lg:24px; --radius-xl:32px; --radius-pill:9999px;

  /* —— SPACING · 8pt grid (Apple) —— */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px;

  /* —— ELEVATION —— */
  --shadow-sm:0 2px 8px rgba(17,17,17,.06);
  --shadow-md:0 8px 30px rgba(17,17,17,.10);
  --shadow-lg:0 20px 60px rgba(17,17,17,.14);

  /* —— CONTROL (Apple: hit-area ≥44px) —— */
  --control-h:48px; --control-h-sm:40px; --hit-min:44px;
  --dur-fast:.15s; --dur-base:.22s; --ease:cubic-bezier(.4,0,.2,1);
}

/* ------------------------------------------------------------
   21.10.2026: синхронизация с каноном /opt/repremium-data/design/tokens.css — токены, появившиеся
   в каноне после 12.10 (вторичный текст на тёмном --color-on-dark-2, --control-h-compact, --font-mono,
   категориальные цвета графиков, бренды площадок, слой marketing-monitor, легаси --av-*). Значения — как в
   каноне; у имён, которые уже были в копии, значения совпадают (сверено), поэтому их не трогаем.
   ------------------------------------------------------------ */
:root{
  --color-on-dark-2: #a9a8bc;
  --material-graphite: #4b4f58;
  --material-gold: #c9a227;
  --brand-vk: #4A76A8;
  --brand-vk-bg: #EEF2FF;
  --brand-avito: #00A650;
  --brand-avito-bg: #EDFAF3;
  --brand-webmaster: #3F51B5;
  --brand-webmaster-bg: #F0F4FF;
  --brand-yandex: var(--color-action);
  --brand-yandex-bg: var(--color-action-tint);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --control-h-compact: 32px;
  --series-blue: #0284c7;
  --chart-cat-1: #C0182A;
  --chart-cat-2: #6F42F5;
  --chart-cat-3: #B8690A;
  --chart-cat-4: #008C7A;
  --chart-cat-5: #9C1F8C;
  --chart-cat-6: #1E88D8;
  --chart-cat-1-tint: #fbe8ea;
  --chart-cat-2-tint: #efeaff;
  --chart-cat-3-tint: #fdf0dd;
  --chart-cat-4-tint: #e0f5f1;
  --chart-cat-5-tint: #f8e6f4;
  --chart-cat-6-tint: #e4f0fc;
  --cat-muted-1: #8B4D43;
  --cat-muted-2: #8B723B;
  --cat-muted-3: #3B7E67;
  --cat-muted-4: #5A75AE;
  --cat-muted-5: #844B76;
  --cat-muted-1-tint: #fef2f0;
  --cat-muted-2-tint: #fbf3e7;
  --cat-muted-3-tint: #e7f8f1;
  --cat-muted-4-tint: #f1f4ff;
  --cat-muted-5-tint: #fff1fa;
  --av-bg-main: #F9F9FB;
  --av-bg-white: #FFFFFF;
  --av-bg-hover: #F4F4F8;
  --av-tx-primary: #262343;
  --av-tx-secondary: #5C5A72;
  --av-tx-tertiary: #9291A1;
  --av-border: #E7E7EF;
  --av-border-light: #F0F0F4;
  --av-primary: #E81717;
  --av-primary-tint: #FDE7E9;
  --av-ok: #1a7a3e;
  --av-ok-bg: #e6f6ec;
  --av-blue-bg: #EEF4FF;
  --av-blue-label: #dde8ff;
  --av-blue-total: #d6e4ff;
  --av-blue-tx: #3a5fd9;
  --av-red-label: #f9d4d4;
  --av-red-total: #f5c0c0;
  --av-green-label: #cdead8;
  --av-green-total: #bfe4cd;
  --av-total-bg: #f4f3fa;
  --av-col-hover: #eef1f8;
  --av-col-picked: #e4e9f7;
  --av-fs-cap: 11px;
  --av-fs-sm: 12px;
  --av-fs-tbl: 13.5px;
  --av-fs-h3: 15px;
  --av-radius-lg: 16px;
  --av-radius-md: 10px;
  --av-fs-base: 13px;
  --av-fs-md: 14px;
  --av-fs-h2: 18px;
  --av-fs-h1: 22px;
  --av-chart-blue: #4a7cf6;
  --av-chart-green: #2e9e5b;
  --av-chart-red: #e05050;
  --av-chart-dark: #262343;
  --av-chart-gray: #9aa0b4;
  --av-chart-gold: #c47f18;
  --mm-accent: #E8192C;
  --mm-accent-hover: #C8101F;
  --mm-accent-tint: var(--color-action-tint);
  --mm-accent-on: var(--color-on-action);
  --mm-accent-dark: #FF5A66;
  --mm-accent-hover-dark: #FF7079;
  --mm-accent-on-dark: #1A1622;
  --mm-tx-primary: var(--color-navy);
  --mm-tx-secondary: #5C5A72;
  --mm-tx-tertiary: var(--color-ink-3);
  --mm-tx-quaternary: #BFBECB;
  --mm-tx-on-dark: #F2F2F5;
  --mm-tx-primary-dark: #ECEBF2;
  --mm-tx-secondary-dark: #A9A8BC;
  --mm-tx-tertiary-dark: #76748A;
  --mm-tx-quaternary-dark: #54526A;
  --mm-bg-canvas: #F4F4F6;
  --mm-bg-surface: var(--color-surface);
  --mm-bg-surface-2: #F7F7F9;
  --mm-bg-sidebar: #1A1A1A;
  --mm-bg-sidebar-active: #252525;
  --mm-bg-canvas-dark: var(--color-dark-2);
  --mm-bg-surface-dark: #1A1A1A;
  --mm-bg-surface-2-dark: #232233;
  --mm-bg-sidebar-dark: #0E0C18;
  --mm-good: #1F7A33;
  --mm-good-bg: #E3F6E6;
  --mm-good-dark: #5DD27A;
  --mm-warn: #9A4E00;
  --mm-warn-bg: #FCEFDD;
  --mm-warn-dark: #F0A742;
  --mm-bad: var(--chart-cat-1);
  --mm-bad-dark: #FF6B78;
  --mm-chart-grid: #F0F0F0;
  --mm-sb-separator: #2E2E2E;
  --mm-sb-tx: #D6D6D6;
  --mm-sb-tx-strong: #E8E8E8;
  --mm-sb-tx-group: #E1E1E1;
  --mm-sb-tx-user: #ccc;
  --mm-sb-tx-cap: #8A8A8A;
  --mm-sb-tx-muted: #666;
  --mm-sb-tx-dim: #555;
  --mm-info: #1E4D7B;
  --mm-danger-border: #FFCDD2;
  --mm-wm-blue: #3b82f6;
  --mm-wm-green: #10b981;
  --mm-wm-orange: #f59e0b;
  --mm-wm-gray: #94a3b8;
  --mm-md-on-primary-container: #650511;
  --mm-md-on-secondary-container: #22213A;
  --mm-md-surface-container-low: #FBFCFD;
  --mm-md-surface-container: #F4F5F7;
  --mm-md-surface-container-high: #EBEEF2;
  --mm-md-on-surface: #1D1B20;
  --mm-md-on-surface-variant: #5F5D6B;
  --mm-md-outline: #9A98A6;
  --mm-md-outline-variant: #DADCE3;
  --mm-md-on-success-container: #155C26;
  --mm-md-neutral-container: #EEF1F5;
  --mm-md-error: #B3261E;
}

/* ============================================================
   Тёмная тема автономных страниц панели cloudcli.
   Панель хранит выбор в localStorage["theme"] и вешает класс
   .dark на <html>; reprem-header.js делает то же на наших
   страницах. html.dark — явный выбор, @media — системный
   фолбэк, пока класс ещё не проставлен (html без .dark/.light).
   Значения собраны из уже существующих токенов (var) и rgba,
   чтобы не вводить новый хардкод-hex мимо дизайн-системы.
   Бренд-акценты (action/accent) не меняем.
   ============================================================ */
html.dark{
  --color-ink:        var(--color-on-dark);
  --color-ink-2:      #9291a1; /* = исходный --color-ink-3, читаемо на тёмном */
  --color-ink-3:      #6a6a6a;
  --color-canvas:     var(--color-dark-2);
  --color-surface:    var(--color-dark);
  --color-surface-2:  var(--color-navy);
  --color-line:       rgba(255,255,255,.14);
  --color-accent-tint:rgba(111,66,245,.26);
  --color-action-tint:rgba(232,23,23,.22);
  --color-warm-tint:  color-mix(in srgb, var(--color-warning) 20%, transparent);
  --color-success-tint:rgba(31,170,89,.20);
  --color-warning-tint:rgba(245,166,35,.18);
  --color-danger-tint:rgba(232,23,23,.22);
  --shadow-sm:0 2px 8px rgba(0,0,0,.45);
  --shadow-md:0 8px 30px rgba(0,0,0,.55);
  --shadow-lg:0 20px 60px rgba(0,0,0,.65);
}
@media (prefers-color-scheme: dark){
  html:not(.light):not(.dark){
    --color-ink:        var(--color-on-dark);
    --color-ink-2:      #9291a1;
    --color-ink-3:      #6a6a6a;
    --color-canvas:     var(--color-dark-2);
    --color-surface:    var(--color-dark);
    --color-surface-2:  var(--color-navy);
    --color-line:       rgba(255,255,255,.14);
    --color-accent-tint:rgba(111,66,245,.26);
    --color-action-tint:rgba(232,23,23,.22);
    --color-warm-tint:  color-mix(in srgb, var(--color-warning) 20%, transparent);
    --color-success-tint:rgba(31,170,89,.20);
    --color-warning-tint:rgba(245,166,35,.18);
    --color-danger-tint:rgba(232,23,23,.22);
    --shadow-sm:0 2px 8px rgba(0,0,0,.45);
    --shadow-md:0 8px 30px rgba(0,0,0,.55);
    --shadow-lg:0 20px 60px rgba(0,0,0,.65);
  }
}