/* Meraveli design system — tokens v1.1 (02.10.2026)
   Источник правды: docs/design-system/design-system.md. Значения вне этого файла в CSS страниц запрещены. */
:root{
  color-scheme: light;

  /* color */
  --bg:#F4F5F1; --card:#FFFFFF; --surface-2:#F0F1EC;
  --line:#DDE0D8; --line-strong:#7F867B;
  --ink:#1E2124; --muted:#62676C; --link:#4B7A12;
  --lime:#C4F04A; --lime-soft:#EDF7D3;
  --dark:#1E2124; --dark-2:#272B2F; --dark-line:#3A4046;
  --on-dark:#ECEEE8; --on-dark-2:#C9CDC4; --dim:#A3A9AE;
  --danger:#8A2A1D; --danger-soft:#FBE3E0;

  /* type */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-display:clamp(36px,5.2vw,64px);
  --fs-h1:clamp(32px,4.4vw,52px);
  --fs-h2:clamp(28px,4vw,44px);
  --fs-h2-doc:clamp(22px,2.6vw,26px);
  --fs-h3:20px;
  --fs-num:clamp(44px,6vw,72px);
  --fs-price:40px;
  --fs-lead:clamp(18px,1.9vw,21px);
  --fs-body:17px; --fs-small:15px; --fs-caption:13px; --fs-over:12px;
  --lh-body:1.55; --lh-display:1.06; --lh-head:1.08; --lh-h2:1.1; --lh-h3:1.2; --lh-lead:1.5;
  --fw-text:400; --fw-ui:600; --fw-bold:700; --fw-head:800;

  /* layout */
  --shell:1140px; --shell-narrow:820px; --gutter:20px;
  --section:clamp(56px,8vw,96px);

  /* space (4px step) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px;
  --s-2-5:10px; --s-3-5:14px; --s-4-5:18px; --s-5-5:22px; --s-6-5:26px; --s-7-5:30px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-18:72px; --s-24:96px; --s-30:120px;

  /* shape */
  --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --shadow-1:0 20px 40px -24px rgba(30,33,36,.35);
  --shadow-2:0 30px 60px -30px rgba(30,33,36,.4);
  --shadow-3:0 24px 50px -20px rgba(0,0,0,.55);
  --shadow-lime:0 10px 30px -10px rgba(196,240,74,.7);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:200ms; --t-base:300ms; --t-slow:700ms;

  /* focus (переопределяется на lime внутри тёмных контейнеров) */
  --focus:var(--ink);
  /* z-index */
  --z-raised:1; --z-header:10; --z-sticky:20; --z-banner:30; --z-skip:100;
  /* controls */
  --btn-l:56px; --btn-m:52px; --btn-s:44px; --tap:44px; --field:52px;
}
/* breakpoints (для справки, CSS-переменные в @media не работают): lg ≤980px, sm ≤640px, xs ≤360px */
@media (max-width:640px){ :root{ --fs-body:16px; } }
@media (max-width:360px){ :root{ --gutter:16px; } }
@media (prefers-reduced-motion:reduce){ :root{ --t-fast:0ms; --t-base:0ms; --t-slow:0ms; } }

/* Dark focus must be explicit: the mastermind .hero is light. */
.hero-dark,.sec-program,.signup-dark,.result-dark,.card-f,.dark,.sticky{ --focus:var(--lime); }

/* Shared foundations: page-specific layouts remain namespaced in release A. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs-body)/var(--lh-body) var(--font)}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::placeholder{color:var(--muted);opacity:1}
a{color:var(--link);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
img{height:auto}
.ds-shell{width:min(calc(100% - 2 * var(--gutter)),var(--shell));margin-inline:auto}
.ds-shell--narrow{max-width:var(--shell-narrow)}
.ds-skip{position:fixed;z-index:var(--z-skip);top:var(--s-3);left:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--card);color:var(--ink);transform:translateY(-180%)}
.ds-skip:focus{transform:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-dark,.sec-program,.signup-dark,.result-dark,.card-f,.dark,.sticky{color:var(--on-dark)}
.hero-dark a,.sec-program a,.signup-dark a,.result-dark a,.card-f a,.dark a{color:var(--lime)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--btn-m);padding:0 var(--s-6);border:0;border-radius:var(--r-pill);font-size:16px;font-weight:var(--fw-bold);line-height:1.2;text-decoration:none;cursor:pointer;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn-primary{background:var(--lime);color:var(--ink);box-shadow:var(--shadow-lime)}
.btn-primary:hover{box-shadow:0 14px 32px -10px rgba(196,240,74,.8)}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--line-strong);color:var(--ink)}
.btn-ghost-dark{background:transparent;box-shadow:inset 0 0 0 2px rgba(236,238,232,.5);color:var(--on-dark)}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed;transform:none}
.btn[disabled]{opacity:.5}
.btn[aria-busy="true"]{opacity:1;cursor:progress;pointer-events:none}
.btn--l{min-height:var(--btn-l);padding-inline:var(--s-7);font-size:17px}
.btn--s{min-height:var(--btn-s);padding-inline:var(--s-4-5);font-size:15px}
.btn .arr{transition:transform var(--t-fast) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.ds-card{padding:var(--s-6-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.ds-note{padding:var(--s-4) var(--s-4-5);border-radius:var(--r-md);background:var(--surface-2);color:var(--muted);font-size:15px}
.ds-badge-ok{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);background:var(--lime-soft);color:var(--link);font-size:15px;font-weight:800}
.ds-field{display:block;width:100%;min-height:var(--field);padding:13px 15px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font-size:16px}
.ds-field:focus-visible{border-color:var(--ink);background:var(--card);box-shadow:0 0 0 3px var(--lime-soft)}
textarea.ds-field{min-height:92px;resize:vertical}
select.ds-field{appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%231E2124' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.ds-field[aria-invalid="true"]{border-color:var(--danger)}
.ds-field-error{color:var(--danger);font-size:14px}
.field-error{margin:6px 0 0;color:var(--danger);font-size:14px}
.ds-progress{height:8px;overflow:hidden;border-radius:var(--r-xs);background:var(--line)}
.ds-progress>i{display:block;height:100%;background:var(--link)}
.ds-progress-quarter{width:25%}
.ds-check-done{background:var(--lime-soft)}
.ds-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding-block:34px 40px;color:var(--muted);font-size:14px}
.ds-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.ds-foot small{flex-basis:100%;color:var(--muted);font-size:12px}
.site-footer{padding:0;border-top:1px solid var(--line);background:var(--bg);color:var(--muted)}
.site-footer .ds-foot{width:min(calc(100% - 2 * var(--gutter)),var(--shell));max-width:var(--shell);margin-inline:auto;padding:34px 0 40px}
main[lang="de"]{hyphens:auto;overflow-wrap:anywhere}
@media(max-width:640px){.btn--mobile-wide{width:100%}.ds-card{padding:var(--s-5-5)}html{scroll-padding-bottom:96px}.page-workshop .site-footer .ds-foot{padding-bottom:calc(110px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.btn .arr{transition:none}}
@media print{.ds-skip,.sticky,.ds-hide-print{display:none!important}.hero-dark,.sec-program,.signup-dark,.result-dark,.card-f,.dark{background:#fff!important;color:#000!important}.rv-up{opacity:1!important;transform:none!important}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}}
/* The noindex component showroom uses these namespaced layouts. */
.ds-showroom main{padding-block:48px 80px}
.ds-showroom section{margin-block:40px}
.ds-showroom h1,.ds-showroom h2{line-height:1.1}
.ds-showroom h1{font-size:var(--fs-h1)}
.ds-showroom h2{font-size:var(--fs-h2-doc)}
.ds-showroom .examples{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.ds-showroom .stack{display:grid;gap:16px;max-width:560px}
.ds-showroom .sample-dark{margin-top:16px;padding:32px;border-radius:var(--r-xl);background:var(--dark);color:var(--on-dark)}
.ds-showroom .swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px}
.ds-showroom .swatch{min-height:96px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);font-size:13px;font-weight:700}
.ds-showroom .swatch-bg{background:var(--bg)}
.ds-showroom .swatch-card{background:var(--card)}
.ds-showroom .swatch-lime{background:var(--lime)}
.ds-showroom .swatch-lime-soft{background:var(--lime-soft)}
.ds-showroom .swatch-dark{background:var(--dark);color:var(--on-dark)}
.ds-showroom .faq{border-bottom:1px solid var(--line);padding:16px 0}
.ds-showroom .faq summary{min-height:44px;cursor:pointer;font-weight:700}
.ds-showroom .error{padding:12px;border-radius:var(--r-sm);background:var(--danger-soft);color:var(--danger)}