/* kms-tokens.css - KMS design system v1 (KAN-1344, UX/UI audit 29.10.2026, review-06 "Предлагаемые единые токены").
   ONE source of truth for colour, type, radius and spacing. Loaded globally in <head> (layout/theme.liquid, after the
   two CSS bundles) on every page. Only custom properties + opt-in component classes live here, so this file alone
   changes no pixel of an existing component; the site-wide normalisation of existing buttons / eyebrows / badges is
   assets/kms-ds.css (theme setting "kms_ds_components", on by default; off = previous look).
   Names: --kms-*. Use them in new CSS instead of hex values:  color: var(--kms-text-muted).
   Roll back: delete the <link> to this file in layout/theme.liquid (no component depends on it without a fallback). */

:root {
  /* ---- colour ---- */
  --kms-bg: #0C0D0F;
  --kms-surface-1: #131418;
  --kms-surface-2: #1A1B20;
  --kms-surface-3: #22242A;
  --kms-border: rgba(255, 255, 255, .08);
  --kms-border-strong: rgba(255, 255, 255, .16);
  --kms-text: #F4F5F7;          /* 18.1:1 on --kms-bg */
  --kms-text-muted: #B6B9BF;    /* 10.4:1 */
  --kms-text-subtle: #8A8D94;   /*  5.8:1 - the floor for any text on the dark background */
  --kms-lime: #C6FF3A;          /* the only lime */
  --kms-lime-hover: #D4FF66;
  --kms-lime-soft: rgba(198, 255, 58, .12);
  --kms-pink: #FF2E88;
  --kms-pink-hover: #FF5AA2;
  --kms-pink-soft: rgba(255, 46, 136, .14);
  --kms-on-accent: #0C0D0F;     /* the only text colour on lime and on pink (16.4:1 / 5.6:1) */
  --kms-focus-ring: 0 0 0 2px var(--kms-bg), 0 0 0 4px var(--kms-lime);

  /* ---- type: three families only ---- */
  --kms-font-display: 'Archivo', 'Arial Narrow', sans-serif;   /* H1/H2, weight 850, uppercase */
  --kms-font-text: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kms-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --kms-font-mono-compact: 'Geist Mono Compact', 'Geist Mono', ui-monospace, monospace; /* where the retired pixel font was (76%) */

  /* heading scale: desktop 1440 / phone 390, linear in between (clamp) */
  --kms-display-xl: clamp(44px, calc(27.66px + 4.19vw), 88px);   /* product landings (AI CRM, How it works) */
  --kms-display-l: clamp(36px, calc(25.6px + 2.667vw), 64px);    /* hubs, collections, Pricing, Contact */
  --kms-display-m: clamp(30px, calc(24.8px + 1.333vw), 44px);    /* content: About, FAQ, Privacy, article, PDP, Cart, Search, 404 */
  --kms-h2: clamp(28px, calc(22.06px + 1.524vw), 44px);
  --kms-h2-prose: clamp(24px, calc(22.51px + .381vw), 28px);
  --kms-h3: clamp(18px, calc(17.26px + .19vw), 20px);
  --kms-display-lh: .92;
  --kms-display-ls: -.01em;
  --kms-body: 16px;
  --kms-body-lh: 26px;
  --kms-small: 14px;
  --kms-small-lh: 22px;
  --kms-eyebrow-size: 12px;
  --kms-eyebrow-lh: 16px;
  --kms-eyebrow-ls: .14em;

  /* ---- shape ---- */
  --kms-radius-sm: 8px;     /* tags, small buttons */
  --kms-radius-md: 12px;    /* buttons, inputs */
  --kms-radius-lg: 16px;    /* cards, dialogs */
  --kms-radius-pill: 999px; /* chips, header search only */
  --kms-radius-badge: 6px;

  /* ---- layout + spacing ---- */
  --kms-container: 1200px;
  --kms-container-prose: 720px;
  --kms-gutter: clamp(20px, calc(12.57px + 1.905vw), 40px);
  --kms-section-top: clamp(40px, calc(31.09px + 2.286vw), 64px);  /* header -> first block */
  --kms-section-y: clamp(72px, calc(54.17px + 4.571vw), 120px);   /* between sections */
  --kms-space-1: 4px; --kms-space-2: 8px; --kms-space-3: 12px; --kms-space-4: 16px; --kms-space-5: 24px;
  --kms-space-6: 32px; --kms-space-7: 48px; --kms-space-8: 64px; --kms-space-9: 96px; --kms-space-10: 120px;

  /* ---- buttons ---- */
  --kms-btn-h-lg: 56px;
  --kms-btn-h-md: 48px;
  --kms-btn-h-sm: 36px;
  --kms-btn-font: 700 16px/1.2 var(--kms-font-text);
  --kms-btn-shadow-hover: 0 8px 24px rgba(198, 255, 58, .22);
  --kms-btn-transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

/* Form controls do not inherit the page font by default (Arial in the Custom AI / setup-call forms, audit r06#10). */
button, input, select, textarea, optgroup { font-family: inherit; }

/* =====================================================================
   Components (opt-in classes for new markup; kms-ds.css maps the existing ones onto the same rules).
   ===================================================================== */

/* Buttons: .kms-btn (primary, lime) | .kms-btn--accent (pink) | .kms-btn--secondary (outline) | .kms-btn--tertiary (link)
   sizes: .kms-btn--sm 36 | default 48 | .kms-btn--lg 56 */
.kms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--kms-btn-h-md); padding: 0 22px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--kms-radius-md);
  background: var(--kms-lime); color: var(--kms-on-accent);
  font: var(--kms-btn-font); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: var(--kms-btn-transition); -webkit-text-fill-color: currentColor;
}
.kms-btn:hover { background: var(--kms-lime-hover); color: var(--kms-on-accent); box-shadow: var(--kms-btn-shadow-hover); transform: translateY(-1px); }
.kms-btn:active { transform: translateY(1px); box-shadow: none; }
.kms-btn:focus-visible { outline: 2px solid var(--kms-lime); outline-offset: 2px; }
.kms-btn--sm { min-height: var(--kms-btn-h-sm); padding: 0 14px; font-size: 14px; border-radius: var(--kms-radius-sm); }
.kms-btn--lg { min-height: var(--kms-btn-h-lg); padding: 0 28px; }
.kms-btn--accent { background: var(--kms-pink); color: var(--kms-on-accent); }
.kms-btn--accent:hover { background: var(--kms-pink-hover); color: var(--kms-on-accent); box-shadow: 0 8px 24px rgba(255, 46, 136, .25); }
.kms-btn--secondary { background: transparent; color: var(--kms-text); border-color: var(--kms-border-strong); }
.kms-btn--secondary:hover { background: rgba(255, 255, 255, .06); color: var(--kms-text); border-color: rgba(255, 255, 255, .32); box-shadow: none; }
.kms-btn--tertiary { background: none; border: 0; min-height: 0; padding: 0; color: var(--kms-lime); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kms-btn--tertiary:hover { background: none; color: var(--kms-lime-hover); box-shadow: none; transform: none; text-decoration-thickness: 2px; }
.kms-btn[disabled], .kms-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Eyebrow: one style. Markup: <p class="kms-eyebrow"><span class="kms-eyebrow__mark">//</span> Section / sub</p>
   (or without the span: then the "//" is added by ::before via .kms-eyebrow--auto). */
.kms-eyebrow {
  display: block; margin: 0 0 var(--kms-space-4);
  font: 500 var(--kms-eyebrow-size)/var(--kms-eyebrow-lh) var(--kms-font-mono); font-style: normal;
  letter-spacing: var(--kms-eyebrow-ls); text-transform: uppercase; color: var(--kms-text-muted);
}
.kms-eyebrow__mark, .kms-eyebrow--auto::before { color: var(--kms-lime); }
.kms-eyebrow--auto::before { content: "// "; }

/* Badges: .kms-badge + --solid | --soft | --outline, colour --pink (default lime) */
.kms-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--kms-radius-badge);
  font: 600 11px/1 var(--kms-font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.kms-badge, .kms-badge--solid { background: var(--kms-lime); color: var(--kms-on-accent); }
.kms-badge--soft { background: var(--kms-lime-soft); color: var(--kms-lime); }
.kms-badge--outline { background: transparent; color: var(--kms-lime); border-color: currentColor; }
.kms-badge--pink, .kms-badge--pink.kms-badge--solid { background: var(--kms-pink); color: var(--kms-on-accent); }
.kms-badge--pink.kms-badge--soft { background: var(--kms-pink-soft); color: var(--kms-pink); }
.kms-badge--pink.kms-badge--outline { background: transparent; color: var(--kms-pink); }

/* Headings + layout helpers */
.kms-display-xl, .kms-display-l, .kms-display-m, .kms-h2 {
  font-family: var(--kms-font-display); font-weight: 850; text-transform: uppercase;
  line-height: var(--kms-display-lh); letter-spacing: var(--kms-display-ls);
}
.kms-display-xl { font-size: var(--kms-display-xl); }
.kms-display-l { font-size: var(--kms-display-l); }
.kms-display-m { font-size: var(--kms-display-m); }
.kms-h2 { font-size: var(--kms-h2); }
.kms-h3 { font: 600 var(--kms-h3)/1.4 var(--kms-font-text); }
.kms-container { width: 100%; max-width: calc(var(--kms-container) + 2 * var(--kms-gutter)); margin-inline: auto; padding-inline: var(--kms-gutter); box-sizing: border-box; }
.kms-container--prose { max-width: calc(var(--kms-container-prose) + 2 * var(--kms-gutter)); }
.kms-section-top { padding-top: var(--kms-section-top); }

@media (prefers-reduced-motion: reduce) {
  .kms-btn, .kms-btn:hover, .kms-btn:active { transition: none; transform: none; }
}