/* ==========================================================================
   FINAM Design Machine — токены (единственный источник значений)
   Формат: OpenDesign od-design-system-project/v1 (files.tokens)

   Статус: VERIFIED — семантика и шкалы выровнены 2026-10-27 по официальному
   web-ui-kit Финама (@finam/web-ui-kit-theme-finam@1.4.0, тема finam:
   light/dark). Доказательства: source/web-ui-kit-research.md.
   Палитра графиков и структура лендингов — наследие конструктора
   broker.finam.ru: source/broker-finam-research.md.
   Правки бренда вносятся только здесь и в DESIGN.md одним коммитом.
   ========================================================================== */

/* --- Примитивы: живут только в этом файле, наружу не экспортируются ------ */
:root {
  /* Бренд — жёлтый (bg-brand темы finam: light yellow-300, dark yellow-400).
     Текст бренда на светлом фоне — yellow-600 (контраст ссылок). */
  --fn-prim-yellow-25: #fff6e3; /* brand-secondary: мягкий жёлтый фон */
  --fn-prim-yellow-50: #fff2d6;
  --fn-prim-yellow-100: #ffebc2; /* halo фокуса (light) */
  --fn-prim-yellow-300: #ffc759; /* бренд-заливка (light) */
  --fn-prim-yellow-400: #ffba30; /* бренд-заливка (dark), hover (light) */
  --fn-prim-yellow-500: #f9a605; /* active (light) / hover (dark) */
  --fn-prim-yellow-600: #e08f05; /* бренд-текст на светлом */
  --fn-prim-yellow-925: #483623; /* brand-secondary (dark) */

  /* Нейтралы — silver (семантическая база темы finam) */
  --fn-prim-silver-0: #fafafc;
  --fn-prim-silver-25: #f2f2f7;
  --fn-prim-silver-50: #ebebf2;
  --fn-prim-silver-100: #dfdfe8;
  --fn-prim-silver-200: #c0c0cc;
  --fn-prim-silver-300: #a4a4b2;
  --fn-prim-silver-400: #888896;
  --fn-prim-silver-500: #6f6f7c;
  --fn-prim-silver-600: #4f4f59;
  --fn-prim-silver-700: #373740;
  --fn-prim-silver-800: #2f2f37;
  --fn-prim-silver-900: #27272f;
  --fn-prim-silver-925: #202027;
  --fn-prim-silver-950: #1a1a1f;
  --fn-prim-silver-1000: #151519;

  /* Синий — info-акцент и фокус ввода (не бренд: blue-500 как в ките) */
  --fn-prim-blue-25: #e0edff;
  --fn-prim-blue-50: #cce1ff;
  --fn-prim-blue-150: #94c1ff;
  --fn-prim-blue-400: #3898ff;
  --fn-prim-blue-500: #198cff;
  --fn-prim-blue-600: #1e82f3;
  --fn-prim-blue-700: #206fd3;

  /* Корпоративный красный — логотип Финам, маркетинговые плашки, негатив */
  --fn-prim-red-25: #ffe8e8;
  --fn-prim-red-400: #fa5255;
  --fn-prim-red-500: #e84144;
  --fn-prim-red-600: #bd393d;

  /* Позитив — emerald (positive темы finam) */
  --fn-prim-emerald-25: #e6f7f2;
  --fn-prim-emerald-400: #1ea977;
  --fn-prim-emerald-500: #1d9169;

  --fn-prim-purple-600: #9946fc; /* premium (IPO, pre-IPO) */

  /* Палитра графиков (data-chart-1..15) — конструктор broker.finam.ru;
     палитра кита (#A22DF7…) зафиксирована в source/web-ui-kit-research.md */
  --fn-prim-chart-1: #9062e3;
  --fn-prim-chart-2: #91beee;
  --fn-prim-chart-3: #259ea0;
  --fn-prim-chart-4: #875453;
  --fn-prim-chart-5: #e76c6c;
  --fn-prim-chart-6: #bb3068;
  --fn-prim-chart-7: #81c385;
  --fn-prim-chart-8: #5267b0;
  --fn-prim-chart-9: #d17ea3;
  --fn-prim-chart-10: #c9ad63;
  --fn-prim-chart-11: #4eb9b6;
  --fn-prim-chart-12: #566c89;
  --fn-prim-chart-13: #cc7541;
  --fn-prim-chart-14: #a841cc;
  --fn-prim-chart-15: #b4aec7;

  /* --- Семантика: светлая тема (дефолт) ---------------------------------- */
  --fn-color-bg: #ffffff;
  --fn-color-bg-muted: var(--fn-prim-silver-0);
  --fn-color-bg-emphasised: var(--fn-prim-silver-25);
  --fn-color-bg-inverse: var(--fn-prim-silver-950);
  --fn-color-surface: #ffffff;
  --fn-color-surface-inverse: var(--fn-prim-silver-900);
  --fn-color-border: var(--fn-prim-silver-50);
  --fn-color-border-strong: var(--fn-prim-silver-300);
  --fn-color-ink: var(--fn-prim-silver-950);
  --fn-color-ink-secondary: var(--fn-prim-silver-500);
  --fn-color-ink-inverse: #ffffff;
  --fn-color-ink-inverse-secondary: rgba(255, 255, 255, 0.72);

  /* Бренд: заливка (кнопки, активные табы) и текст (ссылки, цифры-акценты)
     — разные шаги жёлтого, как text-brand / bg-brand в ките */
  --fn-color-brand: var(--fn-prim-yellow-300);
  --fn-color-brand-hover: var(--fn-prim-yellow-400);
  --fn-color-brand-pressed: var(--fn-prim-yellow-500);
  --fn-color-brand-muted: var(--fn-prim-yellow-25);
  --fn-color-brand-text: var(--fn-prim-yellow-600);
  --fn-color-onbrand: #000000; /* text-onbrand = black-1000 */
  --fn-color-corporate: var(--fn-prim-red-500); /* логотип, плашки ФИНАМ */
  --fn-color-corporate-hover: var(--fn-prim-red-600); /* ховер корпоративной кнопки (кит: .btn--corporate) */
  --fn-color-oncorporate: #ffffff; /* текст/иконки на корпоративном красном */

  --fn-color-positive: var(--fn-prim-emerald-500);
  --fn-color-negative: var(--fn-prim-red-500);
  --fn-color-warning: var(--fn-prim-yellow-600);
  --fn-color-info: var(--fn-prim-blue-500);
  --fn-color-focus: var(--fn-prim-yellow-400); /* control-border-active */
  --fn-color-premium: var(--fn-prim-purple-600);

  /* Оверлеи бейджей/трендов (низкопрозрачные фоны; opacity-16 кита
     считается от yellow-400) */
  --fn-overlay-positive: rgba(29, 145, 105, 0.12);
  --fn-overlay-negative: rgba(232, 65, 68, 0.12);
  --fn-overlay-warning: rgba(249, 166, 5, 0.16);
  --fn-overlay-brand: rgba(255, 186, 48, 0.16);

  /* --- Типографика ------------------------------------------------------- */
  --fn-font-sans: "Inter var", "Inter", -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif;
  /* Числовой регистр кита: тот же Inter (у кита --ui-fonts-mono = Inter var),
     табличность включается tnum/lnum (font-variant-numeric: tabular-nums) */
  --fn-font-mono: var(--fn-font-sans);

  /* полный font-shorthand: font: var(--fn-text-…); */
  --fn-text-display: 700 clamp(40px, 5vw, 52px) / 1.08 var(--fn-font-sans);
  --fn-text-h1: 700 40px / 48px var(--fn-font-sans);
  --fn-text-h2: 700 28px / 32px var(--fn-font-sans);
  --fn-text-h3: 600 24px / 28px var(--fn-font-sans);
  --fn-text-h4: 600 20px / 24px var(--fn-font-sans);
  --fn-text-h5: 600 18px / 24px var(--fn-font-sans);
  --fn-text-lead: 400 18px / 24px var(--fn-font-sans);
  --fn-text-body: 400 16px / 24px var(--fn-font-sans);
  --fn-text-small: 400 14px / 20px var(--fn-font-sans);
  --fn-text-micro: 600 12px / 16px var(--fn-font-sans);
  --fn-text-num: 500 16px / 20px var(--fn-font-mono);
  /* Strong-варианты и крупный лид (решение 2026-10-27,
   .scratch/template-standards-tails/issues/01): вес живёт в shorthand,
   отдельных font-weight в артефактах не существует */
  --fn-text-body-strong: 600 16px / 24px var(--fn-font-sans);
  --fn-text-small-strong: 600 14px / 20px var(--fn-font-sans);
  --fn-text-lead-l: 400 24px / 28px var(--fn-font-sans);
  /* Кегли рекламного сообщения баннера: шкала кита заканчивается на 52px,
     формат шире (DESIGN.md «Типографика») */
  --fn-text-banner-l: 700 64px / 68px var(--fn-font-sans);
  --fn-text-banner-m: 700 56px / 60px var(--fn-font-sans);
  --fn-text-banner-s: 700 36px / 40px var(--fn-font-sans);
  /* Большая кнопка: buttonLarge = 17px из контракта типографики кита
     (source/web-ui-kit-research.md) */
  --fn-text-button-l: 600 17px / 24px var(--fn-font-sans);

  /* Трекинг: у кита отрицательный и пропорционален кеглю (typography.d.ts) */
  --fn-tracking-display: -0.02em; /* display и h1 */
  --fn-tracking-h2: -0.018em;
  --fn-tracking-h3: -0.016em;
  --fn-tracking-h4: -0.014em;
  --fn-tracking-h5: -0.012em;
  --fn-tracking-micro: 0.02em;
  --fn-transform-micro: uppercase;

  /* --- Сетка и отступы ---------------------------------------------------- */
  --fn-space-1: 4px;  /* 2xs */
  --fn-space-2: 8px;  /* xs */
  --fn-space-3: 12px; /* s */
  --fn-space-4: 16px; /* m */
  --fn-space-5: 20px; /* l */
  --fn-space-6: 24px; /* xl */
  --fn-space-7: 32px; /* 2xl */
  --fn-space-8: 40px; /* 3xl */
  --fn-space-9: 48px; /* 4xl */
  --fn-space-10: 64px; /* 6xl */
  --fn-space-11: 80px; /* 7xl */
  --fn-space-12: 96px; /* 8xl */
  --fn-container: 1200px;
  --fn-container-narrow: 760px;
  --fn-gutter: var(--fn-space-6);
  /* Минимумы auto-fit-сеток карточек (DESIGN.md «Макет»): обычная и
     компактная карточка; числа в grid-шаблонах — только токены */
  --fn-card-min: 240px;
  --fn-card-min-compact: 200px;

  /* --- Радиусы (шкала кита: 4·6·8·12·16·1000) ----------------------------- */
  --fn-radius-s: 6px;
  --fn-radius-m: 8px;
  --fn-radius-l: 12px;
  --fn-radius-xl: 16px;
  --fn-radius-pill: 1000px;

  /* --- Тени (light-значения конструктора) --------------------------------- */
  --fn-shadow-s: 0 1px 3px rgba(39, 47, 64, 0.18);
  --fn-shadow-m: 0 6px 16px rgba(82, 96, 122, 0.08);
  --fn-shadow-l: 0 1px 4px rgba(95, 112, 149, 0.12),
    0 6px 16px rgba(95, 112, 149, 0.2);
  --fn-shadow-dialog: 0 12px 16px rgba(35, 53, 84, 0.1),
    0 10px 56px rgba(24, 39, 64, 0.38);

  /* --- Иконки (инлайн-SVG из реестра icons.html) --------------------------- */
  --fn-icon-size-s: 16px; /* в строке с текстом, после ссылки */
  --fn-icon-size-m: 24px; /* канонический размер набора */
  --fn-icon-size-l: 32px; /* иконка-плашка карточки инструмента */
  --fn-icon-stroke: 1.75px; /* толщина штриха набора */

  /* --- Движение ----------------------------------------------------------- */
  --fn-motion-fast: 140ms;
  --fn-motion-base: 240ms;
  --fn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --fn-focus-ring: 0 0 0 2px var(--fn-color-bg), 0 0 0 4px var(--fn-color-focus);
}

/* --- Тёмная тема: [data-theme="dark"] (карта dark темы finam кита) -------- */
[data-theme="dark"] {
  --fn-color-bg: var(--fn-prim-silver-900);
  --fn-color-bg-muted: var(--fn-prim-silver-925);
  --fn-color-bg-emphasised: var(--fn-prim-silver-950);
  --fn-color-bg-inverse: #ffffff;
  --fn-color-surface: var(--fn-prim-silver-800);
  --fn-color-surface-inverse: #ffffff;
  --fn-color-border: var(--fn-prim-silver-700);
  --fn-color-border-strong: var(--fn-prim-silver-600);
  --fn-color-ink: var(--fn-prim-silver-50);
  --fn-color-ink-secondary: var(--fn-prim-silver-300);
  --fn-color-ink-inverse: var(--fn-prim-silver-950);
  --fn-color-ink-inverse-secondary: rgba(21, 21, 25, 0.72);

  --fn-color-brand: var(--fn-prim-yellow-400);
  --fn-color-brand-hover: var(--fn-prim-yellow-500);
  --fn-color-brand-pressed: var(--fn-prim-yellow-600);
  --fn-color-brand-muted: var(--fn-prim-yellow-925);
  --fn-color-brand-text: var(--fn-prim-yellow-500);
  --fn-color-positive: var(--fn-prim-emerald-400);
  --fn-color-negative: var(--fn-prim-red-400);
  --fn-color-warning: var(--fn-prim-yellow-300);
  --fn-color-info: var(--fn-prim-blue-400);
  --fn-color-focus: var(--fn-prim-yellow-500);

  --fn-shadow-m: 0 6px 16px rgba(0, 0, 0, 0.2);
  --fn-shadow-l: 0 1px 4px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(0, 0, 0, 0.4);
  --fn-focus-ring: 0 0 0 2px var(--fn-color-bg), 0 0 0 4px var(--fn-color-focus);
}

/* Корпоративный шрифт: Inter Variable (SIL OFL, fonts/OFL.txt), релиз
   rsms/inter v4.1. Курсив — брак (DESIGN.md), italic-начертание не
   подключается. Диапазон весов покрывает шкалу 400–800. */
@font-face {
  font-family: "Inter var";
  src: url("fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}