/*
 * marketing-light-1 — design tokens (Marketing Light / SaaS Analytics Landing)
 * Источник: — (обезличено)
 *
 * Значения выведены из computed styles 6 страниц (landing, product-feature,
 * pricing, use-case, partners, blog-article) + mobile scan + CSS parse-rules.
 *
 * Отличия от предыдущих буков коллекции:
 *   - Первый light-theme бук в коллекции
 *   - Dual-theme: light body + dark islands (nav/footer/pricing-cards/feature-cards).
 *     Dark занимает 40-50% полотна — structural, не декоративный приём.
 *   - Signature: большая чёрная h1 68px/weight-800, inset 1px outline вместо drop-shadow,
 *     двойная рамка container 1140 / main 1265, bento-grid 3×372.
 *   - Акцентная триада (magenta / blue / violet) появляется ТОЧЕЧНО —
 *     только как pricing-tier метка. Primary CTA всегда монохром (black pill).
 */

:root {
  /* ═══ ФОНЫ ════════════════════════════════════════════════════ */
  --ml1-bg-base:             #FFFFFF;           /* body */
  --ml1-bg-dark-primary:     rgb(25, 30, 40);   /* nav + primary CTA + dark islands */
  --ml1-bg-dark-deep:        rgb(15, 20, 30);   /* pricing dark cards, deepest */
  --ml1-bg-dark-mid:         rgb(30, 40, 55);   /* subtle dark variant */
  --ml1-bg-surface-cool:     rgb(235, 239, 245);/* light surface cards (cool-tinted) */
  --ml1-bg-surface-deeper:   rgb(217, 224, 236);/* slightly deeper cool surface */
  --ml1-bg-surface-darker:   rgb(51, 61, 83);   /* dark-blue card variant */

  /* ═══ ТЕКСТ (cool navy greys, не neutral!) ════════════════════ */
  --ml1-text-primary:        rgb(25, 30, 40);   /* основной текст на light — 104× на /product */
  --ml1-text-primary-alt:    rgb(30, 40, 55);   /* чуть светлее, на light bodies */
  --ml1-text-on-dark:        #FFFFFF;           /* на dark nav/cards */
  --ml1-text-secondary-dark: rgb(160, 175, 200);/* secondary ПОВЕРХ dark (76-96×) */
  --ml1-text-secondary-lt:   rgb(110, 130, 170);/* secondary ПОВЕРХ light */
  --ml1-text-tertiary:       rgb(85, 105, 150); /* deeper blue-grey для lead-текстов 15px+ */
  --ml1-text-tertiary-alt:   rgb(70, 85, 125);  /* ещё глубже — meta/labels */
  --ml1-text-quiet:          rgb(140, 160, 195);/* quiet micro-text */

  /* ═══ БРЕНД / АКЦЕНТЫ (pricing-tier триада — НЕ для CTA!) ════ */
  --ml1-accent-magenta:      rgb(255, 15, 135); /* Custom-tier label, highlights (71× на /pricing) */
  --ml1-accent-blue:         rgb(50, 135, 255); /* Free-tier label */
  --ml1-accent-violet:       rgb(125, 50, 255); /* Pro-tier label */
  --ml1-accent-light-blue:   rgb(75, 155, 255); /* blog link-accent */
  --ml1-accent-lavender:     rgb(231, 216, 255);/* subtle background hue */
  --ml1-accent-periwinkle:   rgb(180, 195, 255);/* rare soft tint */

  /* ═══ СТАТУСЫ ═════════════════════════════════════════════════ */
  --ml1-status-success:      #27A644;
  --ml1-status-error:        #EB5757;
  --ml1-status-warn:         #F2A93B;

  /* ═══ РАЗДЕЛИТЕЛИ / БОРДЕРЫ ═══════════════════════════════════ */
  --ml1-border-on-dark:      rgb(255, 255, 255);          /* 1px white on dark */
  --ml1-border-on-light:     rgb(25, 30, 40);             /* 1px dark on light */
  --ml1-border-muted:        rgb(110, 130, 170);          /* solid muted blue (3×) */
  --ml1-border-muted-fade:   rgba(110, 130, 170, 0.6);    /* faded muted blue (3×) */
  --ml1-divider-nude:        rgba(0, 0, 0, 0.06);         /* FAQ accordion divider */

  /* ═══ ТИПОГРАФИКА ═════════════════════════════════════════════ */
  /* Источник: проприетарный двойной стек — text-вариант для body/UI + display-вариант для h1/h2.
     Замена: Golos Text — open-source гротеск, линейка 400-900, характерная «а» с прямым хвостом.
     Для display используется тот же Golos Text w800. */
  --ml1-font-body:           'Golos Text', 'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif;
  --ml1-font-display:        'Golos Text', 'Manrope', -apple-system, Arial, sans-serif;
  --ml1-font-cond:           'Golos Text', 'Barlow Condensed', Arial, sans-serif;

  /* Кегли — 4-step display cascade + 16px body */
  --ml1-fs-12:               12px;       /* meta, chip micro 50× */
  --ml1-fs-13:               13.33px;    /* pill text, nav, capsule-микро 23× */
  --ml1-fs-15:               15px;       /* pricing card dense-text 196× */
  --ml1-fs-16:               16px;       /* BASE — body, CTA 442× */
  --ml1-fs-17:               17px;       /* lead-параграф, cta-текст 4-43× */
  --ml1-fs-18:               18px;       /* sub-heading */
  --ml1-fs-h3:               29.74px;    /* h3 */
  --ml1-fs-h2:               46.97px;    /* h2 section title */
  --ml1-fs-h1:               66.06px;    /* h1 hero desktop */
  --ml1-fs-h1-mobile:        32.125px;   /* h1 на 375px — ratio 2.12× */

  /* Веса */
  --ml1-fw-regular:          400;        /* body — 505×, 788× */
  --ml1-fw-medium:           500;        /* CTA text, nav — 28-31× */
  --ml1-fw-black:            800;        /* heading display — 35× */

  /* Line-heights — тёплая жёсткая вилка display ↔ body */
  --ml1-lh-display:          0.976;      /* h1: 64.45 / 66.06 — отрицательный leading */
  --ml1-lh-h2:               1.162;      /* 54.58 / 46.97 */
  --ml1-lh-h3:               1.197;      /* 35.61 / 29.74 */
  --ml1-lh-body:             1.5;        /* 24 / 16 — baseline 8×3 */
  --ml1-lh-small:            1.467;      /* 22 / 15 (pricing dense cards) */
  --ml1-lh-micro:            1.333;      /* 16 / 12 */
  --ml1-lh-lead:             1.412;      /* 24 / 17 */

  /* Letter-spacing — нулевой на body/display, 0.01em (1%) точечно на pill/chip */
  --ml1-ls-normal:           0;
  --ml1-ls-pill:             0.01em;     /* только для 12-13.33px pill/chip/nav */

  /* ═══ РАДИУСЫ (6-step scale + semantics) ══════════════════════ */
  --ml1-radius-xs:           8px;        /* pagination item 32×32 */
  --ml1-radius-sm:           12px;       /* primary/secondary CTA — signature! */
  --ml1-radius-md:           16px;       /* dropdown, popover */
  --ml1-radius-lg:           20px;       /* pricing cards, large surfaces */
  --ml1-radius-xl:           24px;       /* bento cards, feature blocks */
  --ml1-radius-2xl:          32px;       /* pill / lang switch / chips */
  --ml1-radius-3xl:          40px;       /* industry large cards */
  --ml1-radius-pill:         100px;      /* max pill fallback */
  --ml1-radius-circle:       100%;

  /* ═══ ТЕНИ / OUTLINES ═════════════════════════════════════════ */
  /* Signature — flat + 1px inset outline, drop-shadow ОТСУТСТВУЮТ. */
  --ml1-outline-light:       rgb(255, 255, 255) 0 0 0 1px inset;  /* 5× — на dark surfaces */
  --ml1-outline-dark:        rgb(25, 30, 40) 0 0 0 1px inset;     /* 2× — на light cards */
  --ml1-outline-muted:       rgba(110, 130, 170, 0.6) 0 0 0 1px inset;
  /* (только для focus-visible разрешён) */
  --ml1-focus-ring:          0 0 0 2px var(--ml1-text-primary);

  /* ═══ SPACING — spacer-scale s0..s8 (derived) ═════════════════ */
  /* Нестандартные дроби 19.74 / 27.22 / 55.22 — это rem×1.233 / 1.702 / 3.452.
     Реализуем утвержденную 8-ступенчатую шкалу. */
  --ml1-s0:                  0;
  --ml1-s1:                  4px;         /* micro gap */
  --ml1-s2:                  8px;         /* gap (33× used) */
  --ml1-s3:                  12px;        /* gap (37× — доминанта) */
  --ml1-s4:                  16px;        /* padding gutter 0 16 */
  --ml1-s5:                  19.74px;     /* отрицательное наследие (15×) */
  --ml1-s6:                  27.22px;     /* section padding bottom (8×) */
  --ml1-s7:                  40px;        /* between blocks */
  --ml1-s8:                  55.22px;     /* section padding top (5×) — асимметричный ритм 2:1 top/bottom */
  --ml1-s9:                  80px;        /* between major sections */
  --ml1-s10:                 120px;       /* top of hero */

  /* ═══ LAYOUT ══════════════════════════════════════════════════ */
  --ml1-container-max:       1140px;        /* inner content max-width */
  --ml1-container-outer:     1265px;        /* outer frame — двойная рамка! */
  --ml1-container-gutter:    16px;          /* mobile padding */
  --ml1-container-px:        32px;          /* desktop padding */

  /* Hero text block — 60% of container, visual — 40% */
  --ml1-hero-text-w:         684px;
  --ml1-hero-visual-w:       456px;

  /* Bento card grid */
  --ml1-bento-col:           372px;
  --ml1-bento-gap:           12px;
  --ml1-bento-card-h:        208px;

  /* ═══ TRANSITIONS ═════════════════════════════════════════════ */
  --ml1-ease:                ease-in-out;
  --ml1-duration-micro:      0.15s;        /* color/hover на nav links (32× used) */
  --ml1-duration-base:       0.25s;        /* base — 10× */
  --ml1-duration-slow:       0.3s;         /* switch animations */
  --ml1-transition:          all var(--ml1-duration-micro) var(--ml1-ease);

  /* ═══ BUTTONS (готовые композиции) ════════════════════════════ */
  --ml1-btn-h:               48px;         /* primary / secondary */
  --ml1-btn-h-compact:       32px;         /* pill, lang switch */
  --ml1-btn-px:              24px;         /* primary padding-left/right */
  --ml1-btn-pill-px:         12px;         /* pill padding-left */

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

/*
 * Рекомендации по использованию:
 *
 * body      { background: var(--ml1-bg-base); color: var(--ml1-text-primary);
 *             font: 400 16px/1.5 var(--ml1-font-body); letter-spacing: 0; }
 *
 * h1        { font: 800 var(--ml1-fs-h1)/var(--ml1-lh-display) var(--ml1-font-display);
 *             color: var(--ml1-text-primary); letter-spacing: 0; }
 *
 * Primary CTA (на light):
 *   bg: var(--ml1-bg-dark-primary); color: var(--ml1-text-on-dark);
 *   height: 48px; radius: 12px; padding: 0 24px; font: 500 16px; border: 0;
 *
 * Primary CTA (на dark):
 *   bg: #FFFFFF; color: var(--ml1-text-primary);
 *   height: 48px; radius: 12px; padding: 0 24px; font: 500 16px;
 *
 * Secondary CTA (outlined, ghost):
 *   bg: transparent; box-shadow: var(--ml1-outline-dark); (или --outline-light на dark)
 *   color наследует; same sizing.
 *
 * Pill / chip:
 *   height: 32px; radius: 32px; padding: 0 8px 0 12px; font: 400 13.33px;
 *   letter-spacing: var(--ml1-ls-pill);
 *
 * Card (bento-feature):
 *   bg: var(--ml1-bg-dark-deep) или var(--ml1-bg-surface-cool);
 *   radius: var(--ml1-radius-xl) (24px);
 *   box-shadow: var(--ml1-outline-light) ИЛИ var(--ml1-outline-dark);
 *   width: 372px; padding: 24px 28px;
 *
 * Input:
 *   default: border: 1px solid var(--ml1-border-muted);
 *   hover/focus: border: 1px solid var(--ml1-border-on-light);
 *   focus-visible: дополнительно outline: 2px solid var(--ml1-text-primary); outline-offset: 2px.
 *
 * Section padding (signature asymmetric rhythm):
 *   padding: var(--ml1-s8) 0 var(--ml1-s6) 0;  / * 55.22 top / 27.22 bottom = 2:1 * /
 *
 * Container:
 *   max-width: 1140px; внутри outer 1265 (padding 0 16 на mobile, 0 62.5 on desktop).
 *
 * Accents:
 *   magenta/blue/violet — ТОЛЬКО на pricing tiers и точечных метках.
 *   Никогда не в primary CTA.
 */