/* МБС · дизайн-система прототипа — токены второго уровня.
   Цвета бренда и тем — в tokens.css (не переименовываем). Здесь: шрифты, шкала, отступы, радиусы, тени, движение,
   поверхности и линии для светлой и тёмной темы. Подключать после tokens.css, перед mbs.css.
   Основа приёмов — WorkOS (светлая тема) и AuthKit (стекло, hairline, eyebrow); эффекты — Auros. */

/* Шрифты meraclick.com (OFL), самохост: Manrope — заголовки и крупные цифры, Golos Text — остальной текст.
   Кириллица, латиница, латиница-ext (знак ₽). Файлы — копия meraclick-site/src/styles/fonts. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/Manrope-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/Manrope-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/Manrope-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/GolosText-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/GolosText-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/GolosText-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* JetBrains Mono (OFL) — код, eyebrow-подписи, цифры в таблицах */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/JetBrainsMono-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/JetBrainsMono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* ---------- цвет: производные от бренда ---------- */
  --mbs-accent-strong:#D93A2B;      /* заливка основной кнопки: белый текст 4.6:1 */
  --mbs-accent-deep:#8E1F14;        /* тёмный край градиентов */
  --mbs-accent-glow:#FF8A6B;        /* светлый край свечения */
  --mbs-blush:#FFF4F1;              /* самая светлая подложка акцента */
  /* тёмные поверхности — нейтральный серый, не синий (Андрей, 10.11.2026); --mbs-ink остаётся цветом текста */
  --mbs-graphite-0:#121214;         /* фон тёмной секции (= --bg тёмной темы) */
  --mbs-graphite:#18181B;           /* тёмная поверхность: карточка, код, подсказка (= --bg-alt) */
  --mbs-graphite-2:#26262A;         /* приподнятая тёмная поверхность */
  --mbs-ink-2:var(--mbs-graphite);  /* старые имена — для совместимости */
  --mbs-ink-3:var(--mbs-graphite-2);
  --mbs-slate:#636365;              /* третичный текст: 5.6:1 на #F7F7F7, нейтральный */
  --mbs-success:#1F8A5B;
  --mbs-warning:#B26A00;
  --mbs-danger:var(--mbs-accent-ink);

  /* семантика светлой темы (тёмная — ниже) */
  --fg-subtle:var(--mbs-slate);
  --surface:var(--mbs-white);                 /* карточка */
  --surface-2:var(--mbs-paper);               /* вложенная плашка */
  --surface-sunken:#EFEFF1;                   /* трек ползунка, скелетоны */
  --glass:rgba(255,255,255,.62);              /* стекло поверх фона */
  --glass-strong:rgba(255,255,255,.86);
  --line:rgba(24,24,27,.08);                    /* hairline */
  --line-strong:rgba(24,24,27,.16);
  --line-accent:rgba(247,75,59,.32);
  --grid-line:rgba(24,24,27,.05);               /* «чертёжная» сетка фона */
  --focus:var(--mbs-accent-strong);
  --btn-bg:var(--mbs-accent-strong);
  --btn-bg-hover:var(--mbs-accent-ink);
  --code-bg:var(--mbs-graphite);
  --fill-strong:var(--mbs-graphite);   /* выбранный чип, текущая страница, skip-link */
  --on-fill-strong:var(--mbs-white);
  --code-fg:#EDEDF0;
  --tooltip-bg:var(--mbs-graphite);
  --tooltip-fg:var(--mbs-white);
  --scrim:rgba(24,24,27,.36);

  /* переливающиеся кнопки (приём Auros: симметричный градиент 200%, сдвиг background-position 0.6s) */
  --grad-shine:linear-gradient(90deg,#FFE3DD,#FFFDFB,#FFF4EF,#FFD3CA,#FFD3CA,#FFF4EF,#FFFDFB,#FFE3DD);
  --grad-flow:linear-gradient(90deg,#FFE3DD 0%,#FFB4A6 26%,#F74B3B 58%,#C0301F 80%,#8E1F14 100%);
  --grad-type:linear-gradient(90deg,var(--mbs-ink) 0%,#4A2626 55%,var(--mbs-accent-ink) 100%);
  --grad-ember:linear-gradient(180deg,#FFE7E1 0%,#FFFFFF 100%);

  /* ---------- шрифты ---------- */
  --font-display:"Manrope","Golos Text",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-sans:"Golos Text",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---------- типографическая шкала (fluid 375 → 1440) ---------- */
  --fs-display:clamp(2.75rem,1.6rem + 4.9vw,5.5rem);   /* 44 → 88 */
  --fs-h1:clamp(2.375rem,1.65rem + 3.1vw,4.25rem);     /* 38 → 68 */
  --fs-h2:clamp(1.875rem,1.45rem + 1.8vw,3rem);        /* 30 → 48 */
  --fs-h3:clamp(1.375rem,1.2rem + .75vw,1.75rem);      /* 22 → 28 */
  --fs-h4:1.25rem;                                     /* 20 */
  --fs-h5:1.0625rem;                                   /* 17 */
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.1875rem);    /* 17 → 19 */
  --fs-body:1rem;                                      /* 16 */
  --fs-sm:.875rem;                                     /* 14 */
  --fs-xs:.75rem;                                      /* 12 */
  --fs-stat:clamp(3rem,2rem + 4vw,5.25rem);            /* крупные цифры */
  --fs-mega:clamp(3.5rem,1rem + 11vw,13rem);           /* разъезжающийся текст */

  --lh-tight:1.04;
  --lh-head:1.1;
  --lh-snug:1.3;
  --lh-body:1.6;
  --ls-display:-.03em;   /* как у meraclick: Manrope шире Inter */
  --ls-head:-.025em;
  --ls-snug:-.015em;
  --ls-caps:.12em;
  /* жирность заголовков — как у meraclick.com (src/styles/tokens/typography.css):
     H1 и дисплей — Manrope 200, выделенное слово в них — 500; H2 и H4 — Manrope 800; H3 и H5 — Golos Text 600 */
  --fw-h1:200;
  --fw-h1-accent:500;
  --fw-heavy:800;
  --fw-semibold:600;
  --ls-h1:-.025em;

  /* ---------- отступы: база 4px ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --sp-9:48px; --sp-10:56px; --sp-11:64px; --sp-12:80px; --sp-13:100px; --sp-14:120px;
  --section-y:clamp(64px,4rem + 4vw,128px);
  --gutter:clamp(16px,2.4vw,32px);
  --container:1200px;
  --container-wide:1360px;
  --container-text:720px;
  --header-h:72px;

  /* ---------- радиусы ---------- */
  --r-xs:4px;
  --r-sm:6px;        /* бейджи, поля, кнопки-иконки */
  --r-md:10px;
  --r-lg:16px;       /* карточки, модальные окна */
  --r-xl:24px;       /* крупные панели */
  --r-pill:999px;    /* все кнопки */

  /* ---------- тени: многослойные, тон — тёмный бренда (как у WorkOS) ---------- */
  --shadow-xs:0 1px 2px rgba(24,24,27,.06);
  --shadow-sm:0 1px 2px rgba(24,24,27,.05),0 2px 6px rgba(24,24,27,.05);
  --shadow-md:0 .5px 3.6px rgba(24,24,27,.07),0 6.4px 10px rgba(24,24,27,.04),0 15px 24px rgba(24,24,27,.03),0 51px 80px rgba(24,24,27,.02);
  --shadow-lg:0 1px 4px rgba(24,24,27,.08),0 12px 24px rgba(24,24,27,.07),0 32px 64px rgba(24,24,27,.08);
  --shadow-btn:0 1.2px .8px rgba(142,31,20,.12),0 2.6px 1.9px rgba(142,31,20,.08),0 4.8px 3.9px rgba(142,31,20,.067),0 8.6px 8px rgba(142,31,20,.055),0 24px 22px rgba(142,31,20,.035);
  --shadow-inset:inset 0 0 0 1px var(--line);
  --shadow-glass:inset 0 1px 1px rgba(255,255,255,.9),inset 0 0 0 1px var(--line),0 12px 32px rgba(24,24,27,.08);
  --shadow-focus:0 0 0 3px rgba(247,75,59,.28);

  /* ---------- движение ---------- */
  --ease-out:cubic-bezier(.16,1,.3,1);       /* выход, появление */
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:120ms;   /* наведение, цвет */
  --dur-2:200ms;   /* состояния */
  --dur-3:320ms;   /* раскрытие */
  --dur-4:600ms;   /* перелив кнопки */
  --dur-5:1100ms;  /* появление блоков */

  --z-header:50; --z-menu:60; --z-bar:55; --z-toast:70;
}

/* Тёмная тема: акцентные секции, интерфейсы. Совпадает с tokens.css по базовым цветам. */
[data-theme="dark"]{
  --fg-subtle:#939396;
  --surface:var(--mbs-graphite);
  --surface-2:var(--mbs-graphite-2);
  --surface-sunken:rgba(255,255,255,.08);
  --glass:rgba(38,38,42,.55);
  --glass-strong:rgba(24,24,27,.86);
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.22);
  --line-accent:rgba(255,122,108,.4);
  --grid-line:rgba(255,255,255,.05);
  --focus:#FF7A6C;
  --btn-bg:var(--mbs-accent-strong);
  --btn-bg-hover:var(--mbs-accent);
  --code-bg:#0C0C0E;
  --tooltip-bg:var(--mbs-white);
  --tooltip-fg:var(--mbs-graphite);
  --fill-strong:var(--mbs-white);
  --on-fill-strong:var(--mbs-graphite);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 2px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.25);
  --shadow-md:inset 0 1px 1px rgba(255,255,255,.06),0 16px 32px rgba(0,0,0,.35);
  --shadow-lg:inset 0 1px 1px rgba(255,255,255,.08),inset 0 24px 48px rgba(255,138,107,.04),0 24px 48px rgba(0,0,0,.45);
  --shadow-glass:inset 0 1px 1px rgba(255,255,255,.12),inset 0 0 0 1px var(--line),inset 0 24px 48px rgba(255,138,107,.04),0 16px 32px rgba(0,0,0,.3);
  --shadow-focus:0 0 0 3px rgba(255,122,108,.35);
  --grad-type:linear-gradient(180deg,#FFFFFF 0%,#FFD3CA 100%);
  --grad-ember:linear-gradient(180deg,#2B1A1A 0%,var(--mbs-graphite) 100%);
  color-scheme:dark;
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-1:1ms;--dur-2:1ms;--dur-3:1ms;--dur-4:1ms;--dur-5:1ms}
}