/* ============================================================================
   Design Book: marketing-light-6
   Архетип: playful B2B SaaS GTM platform
   Captured: 2026-04-26
   Префикс: --ml6-*
   Источник истины для tokens.md и components.md
   ============================================================================ */

:root {

  /* ────────────────────────────────────────────────────────────────────────
     ШРИФТЫ
     Proprietary geometric sans (low x-height, humanist warmth) — substitute General Sans (Fontshare free)
     Один шрифт на display + body + UI labels — single-font monodiscipline
     ──────────────────────────────────────────────────────────────────────── */
  --ml6-font-primary: "General Sans", "Inter", "system-ui", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ml6-font-mono: "JetBrains Mono", "Roboto Mono", "ui-monospace", ui-monospace, Menlo, monospace;
  --ml6-font-display-reserve: "Fraunces", "Canela Web", Georgia, serif; /* declared but unused — reserve */

  /* ────────────────────────────────────────────────────────────────────────
     ЦВЕТОВЫЕ SWATCH-СЕМЬИ — 8 хроматических + 2 нейтральные
     Хроматическая дисциплина: каждая семья 1-2 раза на сайте
     ──────────────────────────────────────────────────────────────────────── */

  /* Oat — warm neutrals (hue 30-40°, sat 8-15%) — DOMINANT spine */
  --ml6-oat-50:   #fffcfa;
  --ml6-oat-100:  #f9f8f6;
  --ml6-oat-200:  #f3f2ed;
  --ml6-oat-300:  #eee9df;
  --ml6-oat-400:  #dad4c8;
  --ml6-oat-500:  #c0bbaf;
  --ml6-oat-600:  #9f9b93;
  --ml6-oat-700:  #85817a;
  --ml6-oat-800:  #55534e;
  --ml6-oat-900:  #363430;
  --ml6-oat-950:  #1b1a18;

  /* Grey — cool neutrals (hue 215°) — RESERVE, not active on marketing */
  --ml6-grey-50:  #f7f8f9;
  --ml6-grey-100: #eff1f3;
  --ml6-grey-200: #e6e8ec;
  --ml6-grey-300: #d6d9df;
  --ml6-grey-400: #bfc4cd;
  --ml6-grey-500: #979da9;
  --ml6-grey-600: #717989;
  --ml6-grey-700: #525a69;
  --ml6-grey-800: #3c414d;
  --ml6-grey-900: #282c35;
  --ml6-grey-950: #16181f;

  /* Blueberry — primary chromatic accent (links + product hero + pricing emphasis) */
  --ml6-blueberry-50:  #ecf6ff;
  --ml6-blueberry-100: #d7ebfe;
  --ml6-blueberry-200: #bee0ff;
  --ml6-blueberry-300: #83c4ff;
  --ml6-blueberry-400: #4ca8fd;
  --ml6-blueberry-450: #3859f9; /* observed display variant — pricing highlight bg */
  --ml6-blueberry-500: #0382f7;
  --ml6-blueberry-600: #0667d9; /* link color */
  --ml6-blueberry-700: #0053b5;
  --ml6-blueberry-800: #01418d;
  --ml6-blueberry-900: #002f67; /* deep navy — product page hero canvas */
  --ml6-blueberry-950: #001e4b;

  /* Ube — purple accent reserve (sibling product page palette) */
  --ml6-ube-50:  #f5f3ff;
  --ml6-ube-100: #e9e4ff;
  --ml6-ube-200: #d8d0ff;
  --ml6-ube-300: #c1b0ff;
  --ml6-ube-400: #a789fe;
  --ml6-ube-500: #8b5cf6;
  --ml6-ube-600: #7934f0;
  --ml6-ube-700: #5c15cc;
  --ml6-ube-800: #43089f;
  --ml6-ube-900: #32037d;

  /* Dragonfruit — magenta pop */
  --ml6-dragonfruit-50:  #fff5fc;
  --ml6-dragonfruit-100: #ffe5f7;
  --ml6-dragonfruit-200: #ffd1f1;
  --ml6-dragonfruit-300: #ffb8e8;
  --ml6-dragonfruit-400: #ff99df;
  --ml6-dragonfruit-500: #ff7ad5;
  --ml6-dragonfruit-600: #ff52c2;
  --ml6-dragonfruit-700: #f90ba6;
  --ml6-dragonfruit-800: #cc0687;
  --ml6-dragonfruit-900: #8b045c;

  /* Lemon — yellow (testimonial pop + warning status) */
  --ml6-lemon-100: #fff8d2;
  --ml6-lemon-200: #fef0a4;
  --ml6-lemon-300: #fadf7c;
  --ml6-lemon-400: #f8cc65;
  --ml6-lemon-500: #fbbd41;
  --ml6-lemon-600: #fdad15;
  --ml6-lemon-700: #d08a11;
  --ml6-lemon-800: #9d6a09;
  --ml6-lemon-900: #7f500a;
  --ml6-lemon-950: #623c02;

  /* Matcha — green (about page hero + testimonial pop + success status) */
  --ml6-matcha-100: #dbffe0;
  --ml6-matcha-200: #bcf4ca;
  --ml6-matcha-300: #84e7a5;
  --ml6-matcha-400: #3ece82;
  --ml6-matcha-500: #0dac65; /* about hero forest green */
  --ml6-matcha-600: #078a52;
  --ml6-matcha-700: #02693e;
  --ml6-matcha-800: #02492a;
  --ml6-matcha-900: #03331d;

  /* Tangarine — orange (testimonial pop) */
  --ml6-tangarine-50:  #fff3ed;
  --ml6-tangarine-100: #ffe9d5;
  --ml6-tangarine-200: #fdd4b7;
  --ml6-tangarine-300: #ffbe90;
  --ml6-tangarine-400: #ffa775;
  --ml6-tangarine-500: #fc8936;
  --ml6-tangarine-600: #fa6900;
  --ml6-tangarine-700: #c34e1b;
  --ml6-tangarine-800: #9f3e15;
  --ml6-tangarine-900: #752b12;
  --ml6-tangarine-950: #431407;

  /* Slushie — cyan (rare structural pop) */
  --ml6-slushie-50:  #f5fdff;
  --ml6-slushie-100: #e0f8ff;
  --ml6-slushie-200: #c7f3ff;
  --ml6-slushie-300: #a3ebff;
  --ml6-slushie-400: #7ae3ff;
  --ml6-slushie-500: #3bd3fd;
  --ml6-slushie-600: #2abeea;
  --ml6-slushie-700: #02a8d4;
  --ml6-slushie-800: #0089ad;
  --ml6-slushie-900: #005870;
  --ml6-slushie-950: #00303d;

  /* Pomegranate — red (danger reserve) */
  --ml6-pomegranate-100: #ffebec;
  --ml6-pomegranate-200: #fecdd3;
  --ml6-pomegranate-400: #fc7981;
  --ml6-pomegranate-500: #e94d68;
  --ml6-pomegranate-600: #dd2c53;
  --ml6-pomegranate-700: #b21a3f;

  /* Lime — chartreuse isolated pop */
  --ml6-lime-accent: #cbd810;

  /* ────────────────────────────────────────────────────────────────────────
     РОЛЕВЫЕ ЦВЕТА (используй ИХ, не swatches напрямую)
     ──────────────────────────────────────────────────────────────────────── */

  /* Action — два слота, не объединять */
  --ml6-action-bg:        #000000;              /* Pure black — primary CTA bg */
  --ml6-action-text:      #ffffff;              /* On-action text */
  --ml6-action-bg-hover:  var(--ml6-oat-950);   /* Slight warm shift on hover */

  /* Body text — warm, не чёрный */
  --ml6-text-primary:     var(--ml6-oat-950);   /* #1b1a18 — body reading text */
  --ml6-text-secondary:   var(--ml6-oat-700);   /* #85817a — secondary text */
  --ml6-text-tertiary:    var(--ml6-oat-600);   /* #9f9b93 — placeholder/disabled */
  --ml6-text-on-dark:     #ffffff;
  --ml6-text-on-cream:    var(--ml6-oat-800);

  /* Surface */
  --ml6-bg-page:          #ffffff;              /* main page bg */
  --ml6-bg-section-alt:   var(--ml6-oat-100);   /* alternating section bg */
  --ml6-surface-card-subtle: var(--ml6-oat-200);/* secondary card surface; solution-hero card */
  --ml6-surface-card-warm:   var(--ml6-oat-300);/* warm cream surface; secondary CTA bg */
  --ml6-border-default:   var(--ml6-oat-400);   /* 1px borders */
  --ml6-border-dashed:    #e7e7e7;              /* 1px dashed declared explicitly */

  /* Accent (link, emphasis, deep canvas) */
  --ml6-accent-link:          var(--ml6-blueberry-600);  /* #0667d9 — inline links */
  --ml6-accent-emphasis-bg:   var(--ml6-blueberry-450);  /* #3859f9 — pricing highlight card */
  --ml6-accent-deep-canvas:   var(--ml6-blueberry-900);  /* #002f67 — full-bleed product hero */

  /* Page-color identity (chunk strategy by page-archetype) */
  --ml6-chunk-product-hero:    var(--ml6-blueberry-900); /* deep navy для product-feature pages */
  --ml6-chunk-company-hero:    var(--ml6-matcha-500);    /* forest green — About */
  --ml6-chunk-solution-hero:   var(--ml6-oat-200);       /* cream rounded card 40px — Solutions */
  --ml6-chunk-pricing-tier:    var(--ml6-blueberry-450); /* highlighted plan card */
  --ml6-chunk-home-substrate:  #ffffff;                  /* white + alt cream */

  /* Pop colors for testimonial/poster cards */
  --ml6-pop-yellow:       var(--ml6-lemon-500);      /* #fbbd41 */
  --ml6-pop-orange:       var(--ml6-tangarine-500);  /* #fc8936 */
  --ml6-pop-green:        var(--ml6-matcha-400);     /* #3ece82 */
  --ml6-pop-cyan:         var(--ml6-slushie-500);    /* #3bd3fd */
  --ml6-pop-magenta:      var(--ml6-dragonfruit-500);/* #ff7ad5 */
  --ml6-pop-purple:       var(--ml6-ube-500);        /* #8b5cf6 */

  /* Status */
  --ml6-status-success:   var(--ml6-matcha-500);     /* #0dac65 */
  --ml6-status-warning:   var(--ml6-lemon-500);      /* #fbbd41 */
  --ml6-status-danger:    var(--ml6-pomegranate-500);/* #e94d68 */
  --ml6-status-info:      var(--ml6-blueberry-500);  /* #0382f7 */

  /* ────────────────────────────────────────────────────────────────────────
     ТИПОГРАФИКА — fluid clamp scale
     Single-font monodiscipline + binary weight 400/600 +
     asymmetric tracking (negative display / positive eyebrow)
     ──────────────────────────────────────────────────────────────────────── */

  /* Display scale (clamp min, fluid, max) */
  --ml6-fs-h1: clamp(2.8rem, 2.0rem + 4.0vw, 5.5rem);   /* 44.8 → 88 px */
  --ml6-fs-h2: clamp(2.0rem, 1.4rem + 2.7vw, 3.8rem);   /* 32 → 60.8 px */
  --ml6-fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem);   /* 24 → 36.8 px */
  --ml6-fs-h4: clamp(1.3rem, 1.25rem + 0.2vw, 1.5rem);  /* 20.8 → 24 px */
  --ml6-fs-h5: clamp(1.1rem, 1.075rem + 0.1vw, 1.2rem); /* 17.6 → 19.2 px */
  --ml6-fs-h6: clamp(0.9rem, 0.875rem + 0.1vw, 1.0rem); /* 14.4 → 16 px */
  --ml6-fs-p-xl:   clamp(1.2rem, 1.125rem + 0.4vw, 1.5rem);  /* 19.2 → 24 px */
  --ml6-fs-p-lg:   clamp(1.0rem, 0.94rem + 0.36vw, 1.25rem); /* 16 → 20 px */
  --ml6-fs-p-body: clamp(0.9rem, 0.875rem + 0.1vw, 1.0rem);  /* 14.4 → 16 px */
  --ml6-fs-p-sm:   clamp(0.8rem, 0.775rem + 0.1vw, 0.9rem);  /* 12.8 → 14.4 px */
  --ml6-fs-eyebrow: clamp(0.7rem, 0.675rem + 0.1vw, 0.8rem); /* 11.2 → 12.8 px */

  /* Weight — binary economy 400/600 */
  --ml6-fw-regular: 400;       /* 66% всего текста */
  --ml6-fw-medium:  500;       /* 13% — eyebrow, label, button */
  --ml6-fw-heading: 600;       /* 2.5% — ВСЕ headings H1-H6 одним weight */
  --ml6-fw-bold:    700;       /* редчайший — нумералы, KPI */

  /* Line-height */
  --ml6-lh-h1: 1.0;            /* peak compressed */
  --ml6-lh-h2: 1.1;
  --ml6-lh-h3: 1.2;
  --ml6-lh-h4: 1.4;
  --ml6-lh-h5: 1.4;
  --ml6-lh-h6: 1.4;
  --ml6-lh-body:    1.5;       /* universal body rhythm */
  --ml6-lh-tight:   1.1;       /* badges, micro */
  --ml6-lh-relaxed: 1.6;       /* p_body для long reading */

  /* Letter-spacing — asymmetric */
  --ml6-ls-display:   -0.04em; /* H1-H3 — premium tight */
  --ml6-ls-body-micro:-0.01em; /* sub-perceptual screen tightening */
  --ml6-ls-body:       0;
  --ml6-ls-eyebrow:    0.1em;  /* uppercase tracked open */

  /* ────────────────────────────────────────────────────────────────────────
     SPACING — base 4px / practical 8px / 18-step rem scale
     ──────────────────────────────────────────────────────────────────────── */
  --ml6-space-1:   0.25rem;  /* 4px  — micro */
  --ml6-space-2:   0.5rem;   /* 8px  */
  --ml6-space-3:   0.75rem;  /* 12px */
  --ml6-space-3-5: 0.875rem; /* 14px — eyebrow */
  --ml6-space-4:   1rem;     /* 16px */
  --ml6-space-5:   1.25rem;  /* 20px */
  --ml6-space-6:   1.5rem;   /* 24px */
  --ml6-space-7:   1.75rem;  /* 28px — loam medium card padding insert */
  --ml6-space-8:   2rem;     /* 32px */
  --ml6-space-10:  2.5rem;   /* 40px */
  --ml6-space-12:  3rem;     /* 48px — section xs/sm */
  --ml6-space-16:  4rem;     /* 64px — section md */
  --ml6-space-18:  4.5rem;   /* 72px — trans-zone */
  --ml6-space-20:  5rem;     /* 80px */
  --ml6-space-24:  6rem;     /* 96px — section lg */
  --ml6-space-28:  7rem;     /* 112px */
  --ml6-space-32:  8rem;     /* 128px — section xl */
  --ml6-space-44:  11rem;    /* 176px — display mega-rhythm */

  /* Section padding tokens (vertical) */
  --ml6-section-pad-xs: 3rem;   /* mobile floor */
  --ml6-section-pad-sm: 3rem;   /* identical to xs by design */
  --ml6-section-pad-md: 4rem;   /* tablet */
  --ml6-section-pad-lg: 6rem;   /* desktop standard */
  --ml6-section-pad-xl: 8rem;   /* wide */

  /* Container fluid */
  --ml6-container-min: 20rem;   /* 320px */
  --ml6-container-max: 90rem;   /* 1440px */

  /* Grid gaps — quantized 4-level + hairline */
  --ml6-gap-hairline: 1px;      /* nav dropdown divider trick */
  --ml6-gap-sm: 0.5rem;         /* 8px — tight inline */
  --ml6-gap-button: 1rem;       /* 16px — icon-text in buttons */
  --ml6-gap-md: 1.5rem;         /* 24px — default mid-density */
  --ml6-gap-main: 2.5rem;       /* 40px — feature grid main */

  /* ────────────────────────────────────────────────────────────────────────
     RADIUS — tri-modal binary-with-three-anchored-signatures
     0 dominant (87%) + 12px CTA + 40px hero-card + pill 1584
     Запрет mid-radii 6/10/16/20 (НЕ использовать)
     ──────────────────────────────────────────────────────────────────────── */
  --ml6-radius-none:    0;            /* dominant default — 87% всех элементов */
  --ml6-radius-sharp:   0.5rem;       /* 8px — loam_small, inputs/badges/buttons */
  --ml6-radius-cta:     12px;         /* SIGNATURE — primary CTA, secondary tier cards */
  --ml6-radius-md:      1.5rem;       /* 24px — color-blocks, illustration containers */
  --ml6-radius-card:    1.75rem;      /* 28px — loam_medium card_radius main feature cards */
  --ml6-radius-large:   2.5rem;       /* 40px — SIGNATURE hero-as-card на solution-pages */
  --ml6-radius-pill:    1584px;       /* SIGNATURE — icon-buttons & status capsules */

  /* ────────────────────────────────────────────────────────────────────────
     SHADOWS — minimal, multi-layer subtle
     этот archetype почти не использует shadows — substitute через radius+border
     ──────────────────────────────────────────────────────────────────────── */
  --ml6-shadow-none: none;
  --ml6-shadow-subtle: rgba(0, 0, 0, 0.1) 0 1px 1px 0,
                       rgba(0, 0, 0, 0.04) 0 -1px 1px 0 inset,
                       rgba(0, 0, 0, 0.05) 0 -0.5px 1px 0;
  --ml6-shadow-card-hover: 0 4px 12px rgba(27, 26, 24, 0.06);
  --ml6-shadow-cta-press:  0 1px 0 0 rgba(0, 0, 0, 0.12) inset;

  /* ────────────────────────────────────────────────────────────────────────
     MOTION — два главных easings + длительности
     ──────────────────────────────────────────────────────────────────────── */
  --ml6-ease-out-circ:    cubic-bezier(0.075, 0.82, 0.165, 1);  /* primary — bg-color */
  --ml6-ease-out-quart:   cubic-bezier(0.165, 0.84, 0.44, 1);   /* secondary — transform */
  --ml6-ease-out-soft:    ease-out;
  --ml6-dur-fast:    0.1s;     /* color flick */
  --ml6-dur-base:    0.2s;     /* transform default */
  --ml6-dur-slow:    0.3s;     /* bg-color, border-color */
  --ml6-dur-emerge:  0.4s;     /* transform reveal */

  /* ────────────────────────────────────────────────────────────────────────
     BREAKPOINTS (standard responsive tiers)
     ──────────────────────────────────────────────────────────────────────── */
  --ml6-bp-mobile:  479px;     /* ≤479: max compression floor */
  --ml6-bp-tablet:  767px;     /* ≤767: small tablet */
  --ml6-bp-desktop: 991px;     /* ≤991: tablet portrait */
  --ml6-bp-wide:    1279px;    /* ≥1280: wide */

  /* Z-index */
  --ml6-z-nav:     1000;
  --ml6-z-modal:   9999;
  --ml6-z-dropdown: 99;
}

/* ============================================================================
   Базовые стили на :root + body
   ============================================================================ */
html {
  font-family: var(--ml6-font-primary);
  color: var(--ml6-text-primary);
  background: var(--ml6-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--ml6-ls-body-micro);
}
body {
  font-size: var(--ml6-fs-p-body);
  line-height: var(--ml6-lh-body);
  font-weight: var(--ml6-fw-regular);
}