/*
 * marketing-light-2 — design tokens (Marketing Light / Edu Fin-tech Landing)
 * Источник: — (обезличен)
 *
 * Значения выведены из computed-styles 5 desktop + 1 mobile страниц
 * (частотный анализ) + parse-css-rules + composition snapshot + 5-agent
 * critique-panel (phase 6.7).
 *
 * Отличия от marketing-light-1 (strict-monochrome analytics SaaS):
 *   - Dual-font display identity: Manrope Variable (wght 780!) + Evolventa
 *     (кириллический Computer Modern-like sans) — academic+friendly голос
 *     вместо strict monochrome.
 *   - Dual primary: violet #6553F5 и yellow #FEC800 РАВНОПРАВНЫ как CTA,
 *     не «один brand-color». Плюс coral + lavender pastel mediator.
 *   - Cream #F7F6FB — полноправный bg-токен (не просто off-white подложка):
 *     секции чередуются cream/white/cream, это единственный visual-rhythm
 *     между секциями на 14869px-лендинге.
 *   - 3D skeuomorphic solid-shadow на CTA (rgb(127,102,9) 0 3px 0 под yellow,
 *     rgb(64,52,153) 0 2px 0 под violet) — намеренный ретро-почерк.
 *   - Pill-radii экстремум: 3000px (chip-extreme) + 100px (CTA pill) +
 *     20px (input / card) + 5px (submit-form square). Четыре константы,
 *     не одна.
 *   - Extreme H1 display 124px / weight 780 / Manrope — «журнальная обложка».
 *   - Signature motion: reveal 1.8s cubic-bezier(0.19,1,0.22,1) +
 *     light-sweep flash 3s infinite на CTA.
 *   - Платформа-источник: Tilda (artboards). Container 1265px / 7.5px gutter.
 */

:root {
  /* ═══ ФОНЫ — 4 уровня off-white + абсолютный dark ═════════════════ */
  --ml2-bg-base:             #FFFFFF;           /* основная поверхность body */
  --ml2-bg-cream:            rgb(247, 246, 251);/* signature cream — alt-section bg, 121× в colors_top */
  --ml2-bg-deep-cream:       rgb(244, 244, 249);/* deeper cream — secondary alt surface */
  --ml2-bg-dark-base:        #000000;           /* footer / dark-hero / high-contrast */
  --ml2-bg-dark-soft:        rgb(23, 23, 24);   /* near-black — text on cream lead-paragraphs */

  /* ═══ АКЦЕНТЫ — двойной primary + тёплые mediators ════════════════ */
  --ml2-primary-violet:      rgb(101, 83, 245); /* #6553F5 — CTA, submit, pill-buttons (33×) */
  --ml2-primary-yellow:      rgb(254, 200, 0);  /* #FEC800 — hero CTA, highlight, pricing badge (33×) */
  --ml2-accent-coral:        rgb(255, 133, 98); /* #FF8562 — price-tag, hero outline, magazine accent (26×) */
  --ml2-accent-lavender:     rgb(172, 162, 255);/* #ACA2FF — chip bg, soft tag (9× bg / 14× color) */
  --ml2-accent-lavender-2:   rgb(189, 154, 249);/* lavender variant, deeper */
  --ml2-accent-yellow-soft:  rgb(255, 213, 137);/* softer yellow — badge bg */
  --ml2-accent-violet-soft:  rgb(138, 126, 239);/* desaturated violet — secondary chip */

  /* 3D skeu-shadow «darker-hue» компаньоны (для solid bottom-shadow CTA) */
  --ml2-shadow-yellow-deep:  rgb(127, 102, 9);  /* -50% lightness yellow — under yellow CTA */
  --ml2-shadow-violet-deep:  rgb(64, 52, 153);  /* -40% lightness violet — under violet CTA */

  /* ═══ ТЕКСТ ═══════════════════════════════════════════════════════ */
  --ml2-text-primary:        rgb(0, 0, 0);      /* pure black — H1, body на cream/white (882×) */
  --ml2-text-primary-alt:    rgb(5, 4, 5);      /* near-black, lead-paragraphs */
  --ml2-text-on-dark:        rgb(255, 255, 255);/* text over dark-hero / dark-cards */
  --ml2-text-on-cream:       rgb(247, 246, 251);/* light text over deep dark (inverse) */
  --ml2-text-secondary:      rgb(102, 102, 102);/* секондари — body 14-16px on white/cream (AA).
                                                   ВАЖНО: оригинал 137/137/137 — не проходит WCAG AA (3.5:1).
                                                   Затемнили до 102/102/102 = 4.7:1 — safe для 14-16px. */
  --ml2-text-tertiary:       rgb(137, 137, 137);/* tertiary — meta/micro-labels ≥18px или bold-14px+ (large text AA) */
  --ml2-text-quiet-grey:     rgb(192, 192, 192);/* disabled / watermark — НЕ для body-text */
  --ml2-text-muted:          rgb(185, 185, 185);/* muted — watermarks */
  --ml2-text-quiet:          rgb(162, 162, 162);
  --ml2-text-deep-grey:      rgb(23, 23, 24);   /* тёмно-серый для ложных-H */

  /* ═══ СТАТУСЫ ═════════════════════════════════════════════════════ */
  --ml2-status-success:      #27A644;
  --ml2-status-error:        rgb(255, 16, 16);
  --ml2-status-warn:         var(--ml2-primary-yellow);

  /* ═══ РАЗДЕЛИТЕЛИ / БОРДЕРЫ ═══════════════════════════════════════ */
  --ml2-border-input:        rgb(184, 184, 184);/* inputs default */
  --ml2-border-muted:        rgb(181, 181, 181);/* muted grey 1px */
  --ml2-border-dark:         rgb(69, 68, 73);   /* dark border — on white surfaces */
  --ml2-border-yellow:       var(--ml2-primary-yellow); /* 1px yellow border — hero outline */
  --ml2-border-thin-grey:    rgb(135, 135, 135);
  --ml2-border-divider:      rgb(232, 232, 232);

  /* ═══ ТИПОГРАФИКА ═════════════════════════════════════════════════ */
  /* Источник: Manrope Variable (wght 400-900, custom 780/790 через axis)
     + Evolventa (кириллический academic sans) + TildaSans (платформенный
     default — заменён на Manrope).

     Evolventa подключается через cdnfonts.com (см. index.html):
     `@import url('https://fonts.cdnfonts.com/css/evolventa');`
     Manrope — через Google Fonts Variable. */
  --ml2-font-body:           'Manrope', 'TildaSans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --ml2-font-display:        'Manrope', -apple-system, Arial, sans-serif;
  --ml2-font-display-serif:  'Evolventa', 'Instrument Serif', 'PT Serif', 'Noto Serif', serif;
  /* display-serif — для hero sub-title и ТОЧЕЧНО на academic-акцентах */

  /* Кегли — расширенный cascade с экстремумом 124px */
  --ml2-fs-12:               12px;
  --ml2-fs-13:               13.33px;
  --ml2-fs-14:               14px;
  --ml2-fs-15:               15px;
  --ml2-fs-16:               16px;       /* BASE — body */
  --ml2-fs-17:               17px;       /* lead */
  --ml2-fs-18:               18px;
  --ml2-fs-20:               20px;
  --ml2-fs-22:               22px;       /* small heading */
  --ml2-fs-24:               24px;
  --ml2-fs-27:               27px;
  --ml2-fs-32:               32px;
  --ml2-fs-h3:               27px;       /* h3 */
  --ml2-fs-h2:               42px;       /* h2 section title (weight 900) */
  --ml2-fs-h2-lg:            54px;       /* larger h2 (section title «Тарифы») */
  --ml2-fs-h1-sub:           55px;       /* Evolventa sub-display */
  --ml2-fs-h1-mega:          124px;      /* huge display H1 «Метод» — 1× на всей странице! */
  --ml2-fs-h1-mobile:        48px;       /* H1 на 375px */

  --ml2-fs-price:            40px;       /* pricing card display */
  --ml2-fs-price-lg:         52px;       /* pricing emphasis */

  /* Веса — дискретные + variable-exclusive */
  --ml2-fw-light:            300;
  --ml2-fw-regular:          400;
  --ml2-fw-medium:           500;
  --ml2-fw-semibold:         600;
  --ml2-fw-bold:             700;
  --ml2-fw-heavy:            780;        /* signature variable wght — H1 mega! */
  --ml2-fw-extra:            800;
  --ml2-fw-black:            900;

  /* Line-heights — функциональная шкала: tight display, generous body */
  --ml2-lh-mega:             1.097;      /* 136/124 — H1 huge */
  --ml2-lh-display-sub:      1.109;      /* 61/55 — Evolventa sub */
  --ml2-lh-h2:               1.26;       /* 68/54, 50/42 */
  --ml2-lh-h3:               1.15;       /* 29/27 */
  --ml2-lh-body:             1.31;       /* 21/16 */
  --ml2-lh-lead:             1.31;       /* 22.1/17 lead paragraphs */
  --ml2-lh-caption:          1.25;       /* 17.5/14 */
  --ml2-lh-price:            1.3;        /* 52/40 */

  /* Letter-spacing — нулевой почти везде, signature tight на display */
  --ml2-ls-normal:           0;
  --ml2-ls-tight:            -0.01em;    /* на огромном H1 */

  /* ═══ РАДИУСЫ (4-константная философия) ═══════════════════════════ */
  --ml2-radius-form:         5px;        /* submit-forms, squarish CTAs (НЕ pill!) */
  --ml2-radius-xs:           6px;
  --ml2-radius-sm:           8px;
  --ml2-radius-md:           10px;       /* tooltip */
  --ml2-radius-lg:           12px;
  --ml2-radius-input:        15px;       /* input alt */
  --ml2-radius-card:         20px;       /* cards, hero-blocks — dominant card radius */
  --ml2-radius-xl:           30px;
  --ml2-radius-cta:          100px;      /* pill CTA — primary violet button */
  --ml2-radius-pill:         1000px;     /* alternate full pill */
  --ml2-radius-chip:         3000px;     /* signature «overkill pill» — chip, tag, photo-badge */
  --ml2-radius-circle:       100%;       /* avatar */

  /* ═══ ТЕНИ (4 роли — card / tooltip / 3D-CTA / modal) ═════════════ */
  /* Card — signature diagonal-offset soft */
  --ml2-shadow-card:         -4px 4px 30px 0 rgba(132, 132, 132, 0.1);
  /* Tooltip — 3rd level surface: 3× плотнее чем card, симметричная */
  --ml2-shadow-tooltip:      0 0 15px 0 rgba(0, 0, 0, 0.3);
  /* 3D skeu «press-down» — solid offset, no blur */
  --ml2-shadow-3d-yellow:    0 3px 0 0 var(--ml2-shadow-yellow-deep);
  --ml2-shadow-3d-violet:    0 2px 0 0 var(--ml2-shadow-violet-deep);
  /* Modal / popup */
  --ml2-shadow-modal:        0 0 20px 0 rgba(0, 0, 0, 0.3);
  /* Focus ring (a11y) */
  --ml2-focus-ring:          0 0 0 2px var(--ml2-primary-violet);

  /* ═══ SPACING (s0-s10, 8px-base с signature 55.22/27.22 2:1) ══════ */
  --ml2-s0:                  0;
  --ml2-s1:                  4px;
  --ml2-s2:                  8px;
  --ml2-s3:                  12px;
  --ml2-s4:                  16px;
  --ml2-s5:                  24px;
  --ml2-s6:                  27.22px;    /* section padding bottom (signature asymmetric 2:1) */
  --ml2-s7:                  40px;
  --ml2-s8:                  55.22px;    /* section padding top — 2× от s6 */
  --ml2-s9:                  80px;
  --ml2-s10:                 120px;      /* top of hero */

  /* ═══ LAYOUT ══════════════════════════════════════════════════════ */
  --ml2-container-max:       1265px;     /* Tilda artboard max-width */
  --ml2-container-gutter:    7.5px;      /* signature tight gutter desktop */
  --ml2-container-px-mobile: 16px;       /* mobile padding */

  /* Hero text/visual split (unused на источнике — centered) — но для demo */
  --ml2-hero-text-w:         684px;
  --ml2-hero-visual-w:       456px;

  /* Pricing card — 2-up symmetric (без «recommended») */
  --ml2-pricing-col-count:   2;
  --ml2-pricing-gap:         24px;

  /* ═══ TRANSITIONS — dual temporal (slow reveal / fast hover) ══════ */
  --ml2-ease-expo-out:       cubic-bezier(0.19, 1, 0.22, 1); /* signature Tilda slow ease-out-expo */
  --ml2-ease-hover:          ease-in-out;
  --ml2-duration-reveal:     1.8s;       /* secции выплывают (Tilda signature) */
  --ml2-duration-hover:      0.2s;       /* все hover/focus микро-переходы */
  --ml2-duration-flash:      3s;         /* light-sweep flash on CTA */

  /* Pre-composed transitions */
  --ml2-transition-reveal:   opacity var(--ml2-duration-reveal) var(--ml2-ease-expo-out),
                             transform var(--ml2-duration-reveal) var(--ml2-ease-expo-out);
  --ml2-transition-hover:    background-color var(--ml2-duration-hover) var(--ml2-ease-hover),
                             color var(--ml2-duration-hover) var(--ml2-ease-hover),
                             border-color var(--ml2-duration-hover) var(--ml2-ease-hover),
                             box-shadow var(--ml2-duration-hover) var(--ml2-ease-hover),
                             transform var(--ml2-duration-hover) var(--ml2-ease-hover);

  /* ═══ BUTTONS (готовые композиции) ═════════════════════════════════ */
  --ml2-btn-h:               48px;
  --ml2-btn-h-compact:       36px;
  --ml2-btn-px:              28px;
  --ml2-btn-pill-px:         16px;

  /* ═══ INPUTS ═══════════════════════════════════════════════════════ */
  --ml2-input-h:             44px;
  --ml2-input-px:            20px;

  /* ═══ BREAKPOINTS ══════════════════════════════════════════════════ */
  --ml2-bp-mobile:           768px;
  --ml2-bp-tablet:           1024px;
  --ml2-bp-desktop:          1280px;
}

/*
 * ═══ SIGNATURE KEYFRAME — light-sweep flash на violet CTA ════════════
 * Применяется как ::after overlay на .ml2-btn-primary:
 *
 * .ml2-btn-primary::after {
 *   content: ''; position: absolute; top: 0; left: 30px;
 *   width: 45px; height: 100%;
 *   background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.4));
 *   transform: skewX(-45deg) translateX(-85px);
 *   animation: ml2-flash var(--ml2-duration-flash) linear infinite;
 * }
 */
@keyframes ml2-flash {
  0%   { transform: skewX(-45deg) translateX(-85px); }
  100% { transform: skewX(-45deg) translateX(500px); }
}

/*
 * ═══ Рекомендации по использованию ═══════════════════════════════════
 *
 * body {
 *   font: 400 16px/1.31 var(--ml2-font-body);
 *   background: var(--ml2-bg-base); color: var(--ml2-text-primary);
 * }
 *
 * H1 mega (hero): {
 *   font: 780 var(--ml2-fs-h1-mega)/var(--ml2-lh-mega) var(--ml2-font-display);
 *   letter-spacing: var(--ml2-ls-tight);
 * }
 * H1 sub (Evolventa): {
 *   font: 700 var(--ml2-fs-h1-sub)/var(--ml2-lh-display-sub) var(--ml2-font-display-serif);
 * }
 * H2 section: {
 *   font: 900 var(--ml2-fs-h2)/var(--ml2-lh-h2) var(--ml2-font-display);
 * }
 *
 * Primary CTA (violet pill):
 *   height: 48px; padding: 0 28px; radius: 100px;
 *   background: var(--ml2-primary-violet); color: white;
 *   box-shadow: var(--ml2-shadow-3d-violet);
 *   position: relative; overflow: hidden;
 *   transition: var(--ml2-transition-hover);
 *   ::after → light-sweep flash (см. выше).
 *
 * Yellow CTA (hero emphasis):
 *   height: 48px; padding: 0 28px; radius: 100px;
 *   background: var(--ml2-primary-yellow); color: var(--ml2-text-primary);
 *   box-shadow: var(--ml2-shadow-3d-yellow);
 *
 * Submit-form button (squarish):
 *   height: 48px; radius: var(--ml2-radius-form); background: violet; color: white;
 *
 * Input:
 *   height: 44px; padding: 0 20px; radius: 20px;
 *   border: 1px solid var(--ml2-border-input); background: white;
 *
 * Card:
 *   background: white; radius: 20px;
 *   box-shadow: var(--ml2-shadow-card);
 *
 * Chip / tag / avatar-frame:
 *   radius: var(--ml2-radius-chip);  (namely 3000px)
 *   background: var(--ml2-accent-lavender); color: var(--ml2-text-primary);
 *
 * Section rhythm:
 *   padding: var(--ml2-s8) 0 var(--ml2-s6);  / * 55.22/27.22 = 2:1 * /
 *
 * Section bg alternation:
 *   секция A: bg-base / секция B: bg-cream / секция C: bg-base ...
 *   Разница 247 vs 255 = tiny, но даёт rhythm на длинном скролле.
 *
 * Hero dark:
 *   bg: var(--ml2-bg-dark-base) или gradient на dark;
 *   H1 color: white; Evolventa sub color: rgba(255,255,255,0.85).
 *
 * Pricing (2-up symmetric, без «recommended»):
 *   grid-template-columns: 1fr 1fr; gap: 24px;
 *   обе карточки одинаковой высоты/веса.
 *
 * Reveal-animation:
 *   opacity: 0; transform: translateY(20px);
 *   при попадании в viewport → opacity: 1; transform: translateY(0);
 *   transition: var(--ml2-transition-reveal);
 */