/* ============================================================================
   DESIGN BOOK: marketing-light-5
   Source archetype: editorial AI-frontier-lab corporate (dual-voice serif+sans,
   warm earth palette, whisper-shadow monodiscipline, fluid clamp scale)
   Prefix: --ml5-*
   Free fonts: Fraunces (serif), Inter (sans), JetBrains Mono
   ============================================================================ */

:root {

  /* ── COLORS ─────────────────────────────────────────────── */
  /* Warm earth palette — all neutrals hue 40-60° (нет синих/холодных серых).
     Источник: Webflow --swatch--* rootVars, верифицировано computed colors. */

  /* Core neutrals — ivory surfaces */
  --ml5-color-ivory-light:     #faf9f5;  /* body bg — dominant surface */
  --ml5-color-ivory-medium:    #f0eee6;  /* secondary bg, zebra alternation */
  --ml5-color-ivory-dark:      #e8e6dc;  /* tertiary, card bg, chip hover */

  /* Core neutrals — slate text scale (warm near-black) */
  --ml5-color-slate-dark:      #141413;  /* primary text, dark inversion bg */
  --ml5-color-slate-medium:    #3d3d3a;  /* CTA hover bg */
  --ml5-color-slate-light:     #5e5d59;  /* secondary text */

  /* Core neutrals — cloud muted (warm gray) */
  --ml5-color-cloud-light:     #d1cfc5;  /* very muted, terminal_cta hover */
  --ml5-color-cloud-medium:    #b0aea5;  /* caption text, borders */
  --ml5-color-cloud-dark:      #87867f;  /* muted UI */

  /* Accent — единственный warm CTA accent (hue ~15° orange-red) */
  --ml5-color-clay:            #d97757;  /* primary accent */
  --ml5-color-clay-deep:       #c6613f;  /* darker hover variant */

  /* Swatch art collection — illustration reserve (NOT UI) */
  --ml5-color-oat:             #e3dacc;
  --ml5-color-olive:           #788c5d;
  --ml5-color-cactus:          #bcd1ca;
  --ml5-color-sky:             #6a9bcc;
  --ml5-color-heather:         #cbcadb;
  --ml5-color-fig:             #c46686;
  --ml5-color-coral:           #ebcece;
  --ml5-color-manilla:         #ebdbbc;
  --ml5-color-kraft:           #d4a27f;

  /* Faded overlays */
  --ml5-color-slate-faded-10:  rgba(20, 20, 19, 0.10);
  --ml5-color-slate-faded-20:  rgba(20, 20, 19, 0.20);
  --ml5-color-ivory-faded-10:  rgba(250, 249, 245, 0.10);
  --ml5-color-ivory-faded-20:  rgba(250, 249, 245, 0.20);

  /* System */
  --ml5-color-white:           #ffffff;
  --ml5-color-black:           #000000;
  --ml5-color-transparent:     transparent;

  /* Semantic aliases */
  --ml5-color-bg:              var(--ml5-color-ivory-light);
  --ml5-color-bg-alt:          var(--ml5-color-ivory-medium);
  --ml5-color-bg-card:         var(--ml5-color-ivory-dark);
  --ml5-color-bg-invert:       var(--ml5-color-slate-dark);
  --ml5-color-surface:         var(--ml5-color-ivory-light);

  --ml5-color-text:            var(--ml5-color-slate-dark);
  --ml5-color-text-secondary:  var(--ml5-color-slate-light);
  --ml5-color-text-muted:      var(--ml5-color-cloud-medium);
  --ml5-color-text-on-dark:    var(--ml5-color-ivory-light);
  --ml5-color-text-on-dark-muted: var(--ml5-color-ivory-faded-20);

  --ml5-color-border:          var(--ml5-color-slate-faded-10);
  --ml5-color-border-strong:   var(--ml5-color-slate-faded-20);

  --ml5-color-link:            var(--ml5-color-slate-dark);
  --ml5-color-link-hover:      var(--ml5-color-clay);

  --ml5-color-cta-bg:          var(--ml5-color-slate-dark);
  --ml5-color-cta-text:        var(--ml5-color-ivory-light);
  --ml5-color-cta-bg-hover:    var(--ml5-color-slate-medium);
  --ml5-color-cta-accent-bg:       var(--ml5-color-clay);
  --ml5-color-cta-accent-bg-hover: var(--ml5-color-clay-deep);

  /* Semantic success/warning/danger — proxied to swatch art (no classic red/yellow) */
  --ml5-color-success:         var(--ml5-color-olive);
  --ml5-color-warning:         var(--ml5-color-kraft);
  --ml5-color-danger:          var(--ml5-color-fig);


  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  /* Dual-voice: Serif = editorial body + section-H2
                 Sans  = hero-H1 + UI + CTA
                 Mono  = metadata, code */

  /* Families */
  --ml5-font-serif: "Fraunces", Georgia, serif;
  --ml5-font-sans:  "Inter", Arial, sans-serif;
  --ml5-font-mono:  "JetBrains Mono", monospace;

  /* Weights */
  --ml5-fw-regular:  400;
  --ml5-fw-medium:   500;
  --ml5-fw-semibold: 600;
  --ml5-fw-bold:     700;

  /* Display scale (fluid clamp) */
  --ml5-font-display-xs:   1.25rem;
  --ml5-font-display-s:    1.5rem;
  --ml5-font-display-m:    clamp(1.75rem, 1.67rem + 0.33vw, 2rem);
  --ml5-font-display-l:    clamp(2.25rem, 2.02rem + 0.98vw, 3rem);
  --ml5-font-display-xl:   clamp(2.5rem,  2.04rem + 1.96vw, 4rem);
  --ml5-font-display-xxl:  clamp(2.75rem, 2.21rem + 2.29vw, 4.5rem);
  --ml5-font-display-xxxl: clamp(3.5rem,  2.73rem + 3.27vw, 6rem);

  /* Paragraph scale */
  --ml5-font-paragraph-xs: 1rem;
  --ml5-font-paragraph-s:  clamp(1rem,     0.96rem + 0.16vw, 1.125rem);
  --ml5-font-paragraph-m:  clamp(1.125rem, 1.09rem + 0.16vw, 1.25rem);
  --ml5-font-paragraph-l:  clamp(1.375rem, 1.34rem + 0.16vw, 1.5rem);

  /* Detail scale (fixed — UI labels) */
  --ml5-font-detail-xs: 0.75rem;
  --ml5-font-detail-s:  0.875rem;
  --ml5-font-detail-m:  1rem;
  --ml5-font-detail-l:  1.125rem;
  --ml5-font-detail-xl: 1.25rem;

  /* Monospace */
  --ml5-font-mono-size: clamp(0.875rem, 0.53rem + 1.47vw, 2rem);

  /* Line-heights */
  --ml5-lh-tight:        1;
  --ml5-lh-display-s:    1.05;
  --ml5-lh-display-m:    1.1;
  --ml5-lh-paragraph-s:  1.3;
  --ml5-lh-paragraph-m:  1.4;   /* body default */
  --ml5-lh-paragraph-l:  1.5;

  /* Letter-spacings */
  --ml5-ls-normal:         0;
  --ml5-ls-tight-body:    -0.005em;
  --ml5-ls-tight-display: -0.02em;
  --ml5-ls-uppercase:      0.02em;


  /* ── SPACING (dual-mode: fixed ≤1.5rem, fluid ≥2rem) ────── */
  --ml5-space-1:  0.25rem;
  --ml5-space-2:  0.5rem;
  --ml5-space-3:  0.75rem;
  --ml5-space-4:  1rem;
  --ml5-space-5:  1.5rem;
  --ml5-space-6:  clamp(1.75rem,  1.67rem + 0.33vw, 2rem);
  --ml5-space-7:  clamp(2rem,     1.85rem + 0.65vw, 2.5rem);
  --ml5-space-8:  clamp(2.25rem,  2.02rem + 0.98vw, 3rem);
  --ml5-space-9:  clamp(2.5rem,   2.04rem + 1.96vw, 4rem);
  --ml5-space-10: clamp(3rem,     2.39rem + 2.61vw, 5rem);
  --ml5-space-11: clamp(3.5rem,   2.73rem + 3.27vw, 6rem);
  --ml5-space-12: clamp(5.5rem,   4.12rem + 5.88vw, 10rem);

  /* Gaps */
  --ml5-gap-xs: 0.5rem;
  --ml5-gap-s:  1rem;
  --ml5-gap-m:  1.5rem;
  --ml5-gap-l:  clamp(2.25rem, 2.02rem + 0.98vw, 3rem);
  --ml5-gap-xl: clamp(2.5rem,  2.04rem + 1.96vw, 4rem);

  /* Section rhythm — ALL fluid */
  --ml5-section-xs:       clamp(1.75rem, 1.67rem + 0.33vw, 2rem);
  --ml5-section-sm:       clamp(2.5rem,  2.04rem + 1.96vw, 4rem);
  --ml5-section-md:       clamp(3.5rem,  2.73rem + 3.27vw, 6rem);
  --ml5-section-main:     clamp(5.5rem,  4.12rem + 5.88vw, 10rem);  /* DOMINANT */
  --ml5-section-lg:       clamp(7rem,    4.86rem + 9.14vw, 14rem);  /* hero */
  --ml5-section-page-top: clamp(6rem,    4.16rem + 7.84vw, 12rem);  /* above-fold */


  /* ── LAYOUT ─────────────────────────────────────────────── */
  --ml5-container-max:    89.5rem;                                  /* 1432px */
  --ml5-container-margin: clamp(2rem, 1.08rem + 3.92vw, 5rem);      /* 32-80px */
  --ml5-container-gutter: clamp(1.75rem, 1.67rem + 0.33vw, 2rem);
  --ml5-grid-columns:     12;

  --ml5-nav-height:        4.25rem;    /* 68px */
  --ml5-nav-banner-height: 2.75rem;    /* 44px */


  /* ── RADIUS (binary-biased: 0 dominant + pill role-contrast) ── */
  --ml5-radius-none:    0;
  --ml5-radius-xs:      2px;
  --ml5-radius-sm:      4px;
  --ml5-radius-md:      8px;     /* cards, inputs */
  --ml5-radius-lg:      16px;    /* large cards */
  --ml5-radius-xl:      24px;
  --ml5-radius-pill:    100vw;   /* CTA buttons */
  --ml5-radius-circle:  50%;


  /* ── SHADOWS (whisper monodiscipline) ───────────────────── */
  --ml5-shadow-none:     none;

  /* SIGNATURE: единственная тень, триггер на .card:hover */
  --ml5-shadow-whisper:  rgba(0, 0, 0, 0.01) 0 2px 2px 0,
                         rgba(0, 0, 0, 0.02) 0 4px 4px 0,
                         rgba(0, 0, 0, 0.04) 0 16px 24px 0;

  /* Альтернативная — только для /product/* подстраниц */
  --ml5-shadow-subtle:   rgba(0, 0, 0, 0.05) 0 4px 24px 0;


  /* ── MOTION ─────────────────────────────────────────────── */
  --ml5-duration-instant:  100ms;
  --ml5-duration-fast:     200ms;
  --ml5-duration-base:     300ms;
  --ml5-duration-slow:     400ms;

  --ml5-ease-default:  cubic-bezier(0.77, 0, 0.175, 1);    /* power4 — menu/opacity */
  --ml5-ease-out-circ: cubic-bezier(0.165, 0.84, 0.44, 1); /* hover transforms */
  --ml5-ease-linear:   linear;

  /* Composite transitions */
  --ml5-transition-color:     color var(--ml5-duration-fast) ease;
  --ml5-transition-tri:       border-color var(--ml5-duration-fast) ease,
                              color var(--ml5-duration-fast) ease,
                              background-color var(--ml5-duration-fast) ease;
  --ml5-transition-opacity:   opacity var(--ml5-duration-slow) var(--ml5-ease-default);
  --ml5-transition-transform: transform var(--ml5-duration-fast) var(--ml5-ease-out-circ);
  --ml5-transition-shadow:    box-shadow var(--ml5-duration-fast) var(--ml5-ease-out-circ);

  /* Menu timings (Webflow nav system) */
  --ml5-duration-menu-open:  400ms;
  --ml5-duration-menu-close: 400ms;
  --ml5-duration-dropdown:   200ms;


  /* ── Z-INDEX ────────────────────────────────────────────── */
  --ml5-z-base:    1;
  --ml5-z-sticky:  2;
  --ml5-z-nav:     1000;
  --ml5-z-modal:   1100;
  --ml5-z-toast:   1200;
  --ml5-z-overlay: 2000;


  /* ── BREAKPOINTS (layout reflow only — NOT for type/space) ── */
  --ml5-bp-mobile:  479px;
  --ml5-bp-tablet:  767px;
  --ml5-bp-laptop:  991px;
  --ml5-bp-desktop: 1249px;


  /* ── EXTENSION: marketing-light specific ────────────────── */
  --ml5-hero-padding-top:    var(--ml5-section-page-top);   /* 96-192px */
  --ml5-hero-padding-bottom: var(--ml5-section-lg);         /* 112-224px */
  --ml5-article-max-width:   40rem;                         /* 640px editorial prose col */
  --ml5-card-padding:        var(--ml5-space-8);            /* 36-48px */
  --ml5-dark-inset-padding:  var(--ml5-space-10);           /* 48-80px */

  /* Underline decoration (for H1 editorial-as-editing) */
  --ml5-underline-thickness: 0.06em;
  --ml5-underline-offset:    0.1em;
  --ml5-underline-hover-offset: 0.2em;

  /* Editorial release-card */
  --ml5-release-card-bg:     var(--ml5-color-ivory-medium);
  --ml5-release-card-radius: var(--ml5-radius-lg);          /* 16px */
}


/* ── @prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ml5-duration-instant:   0.01ms;
    --ml5-duration-fast:      0.01ms;
    --ml5-duration-base:      0.01ms;
    --ml5-duration-slow:      0.01ms;
    --ml5-duration-menu-open: 0.01ms;
    --ml5-duration-menu-close:0.01ms;
    --ml5-duration-dropdown:  0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}