/* AnyLinga — дизайн-система Wabaneros.
   Источник: claude.ai/design, проект «Wabaneros дизайн система Anylinga»
   (_ds/wabaneros-design-system-a7032fe9). Перенесено 27.09.2026 без правок
   значений; изменено только подключение шрифтов:
   - Manrope уже самохостится в /css/fonts.css, импорт из Google убран;
   - Material Symbols Rounded — подмножество из 18 иконок, тоже локально. */

/* Подмножество Material Symbols Rounded из 18 иконок, самохостинг (schedule_send 2026-09-30; chevron_right, arrow_forward для блога 2026-10-01).
   Google Fonts не подходит: CSP сайта разрешает стили и шрифты только
   со своего домена (nginx.conf), внешний @import браузер блокирует. */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url(/fonts/material-symbols-subset-v3.woff2) format('woff2');
}

/* ── tokens/colors.css ─────────────────────────────────────────────────── */
:root {
  --color-wa-green: #25D366;
  --color-wa-green-hover: #20C05C;
  --color-wa-green-600: #1DAA61;
  --color-wa-teal: #128C7E;
  --color-wa-teal-dark: #075E54;
  --color-wa-link: #008069;
  --color-wa-bubble: #D9FDD3;
  --color-wa-tint: #F4FBF6;
  --color-wa-tint-2: #E7FCE3;
  --color-wa-tint-line: #DCEFE2;
  --color-wa-tint-line-2: #BDEFCB;
  --color-wa-chat: #EFEAE2;
  --color-brand-900: #054740;

  --color-ink: #111B21;
  --color-ink-on-green: #0B141A;
  --color-ink-2: #3B4A54;
  --color-muted: #54656F;
  --color-muted-2: #8696A0;
  --color-disabled: #AEBAC1;
  --color-line: #E9EDEF;
  --color-line-soft: #F0F2F5;
  --color-line-input: #D1D7DB;
  --color-surface: #FFFFFF;
  --color-canvas: #F7F8FA;

  --color-ok-bg: #D9FDD3;      --color-ok: #075E54;      --color-ok-dot: #1DAA61;
  --color-warn-bg: #FFF1CC;    --color-warn: #7A4F00;    --color-warn-dot: #D99A00;
  --color-bad-bg: #FDECEC;     --color-bad: #B42318;     --color-bad-dot: #E5484D;
  --color-info-bg: #E3F2FD;    --color-info: #0B4A6F;    --color-info-dot: #0B4A6F;
  --color-neutral-bg: #F0F2F5; --color-neutral: #54656F; --color-neutral-dot: #8696A0;
  --color-unknown-bg: #F0F2F5; --color-unknown: #54656F;

  --color-alert-warn-bg: #FFF8E6;  --color-alert-warn-line: #F3D48A;
  --color-alert-bad-bg: #FFF5F5;   --color-alert-bad-line: #F5B5B7;
  --color-alert-info-line: #BFDDF3;

  --text-body: var(--color-ink);
  --text-secondary: var(--color-ink-2);
  --text-muted: var(--color-muted);
  --text-hint: var(--color-muted-2);
  --text-link: var(--color-wa-link);
  --text-link-hover: var(--color-wa-teal-dark);
  --text-on-primary: var(--color-ink-on-green);
  --surface-page: var(--color-surface);
  --surface-app: var(--color-canvas);
  --surface-card: var(--color-surface);
  --surface-selected: var(--color-wa-tint);
  --surface-nav-active: var(--color-wa-tint-2);
  --border-card: var(--color-line);
  --border-row: var(--color-line-soft);
  --border-input: var(--color-line-input);
  --border-selected: var(--color-wa-green);
  --action-primary: var(--color-wa-green);
  --action-primary-hover: var(--color-wa-green-hover);
  --icon-default: var(--color-wa-teal);
  --icon-nav: var(--color-ink-2);
  --icon-active: var(--color-wa-green-600);
}

/* ── tokens/typography.css ─────────────────────────────────────────────── */
:root {
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-icon: "Material Symbols Rounded";

  --text-hero: 56px;        --lh-hero: 1.05;   --ls-hero: -0.035em;
  --text-hero-m: 36px;
  --text-h2: 40px;          --lh-h2: 1.1;      --ls-h2: -0.03em;
  --text-h2-m: 28px;
  --text-page: 28px;        --ls-page: -0.02em;
  --text-step: 24px;
  --text-stat: 22px;
  --text-lead: 19px;
  --text-card-title: 17px;
  --text-body-lg: 16px;
  --text-body: 15px;        --lh-body: 1.55;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --text-small: 12px;
  --text-overline: 11px;    --ls-overline: 0.05em;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800;
}

/* ── tokens/spacing.css ────────────────────────────────────────────────── */
:root {
  --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-18: 72px; --space-24: 96px;

  --radius-input: 10px;
  --radius-choice: 12px;
  --radius-tile: 14px;
  --radius-alert: 16px;
  --radius-stat: 18px;
  --radius-card: 20px;
  --radius-hero: 28px;
  --radius-pill: 999px;

  --container: 1200px; --gutter: 24px; --gutter-m: 16px;
  --header-h: 68px; --sidebar-w: 272px; --cabinet-max: 1180px;
  --section-y: 96px; --section-y-m: 56px;
}

/* ── tokens/effects.css ────────────────────────────────────────────────── */
:root {
  --shadow-cta: 0 6px 16px rgba(37, 211, 102, 0.25);
  --shadow-card: 0 2px 10px rgba(17, 27, 33, 0.03);
  --shadow-preview: 0 8px 28px rgba(17, 27, 33, 0.08);
  --shadow-tab-active: 0 4px 14px rgba(37, 211, 102, 0.14);
  --shadow-segment: 0 1px 3px rgba(17, 27, 33, 0.12);
  --shadow-ring-focus: 0 0 0 3px #D9FDD3;
  --overlay-scrim: rgba(0, 0, 0, 0.4);
  --ease: ease;
  --dur-fast: .15s;
  --dur: .2s;
  --dur-bar: .3s;
}

/* ── components/components.css ─────────────────────────────────────────── */
.wb-root, .wb-root * { box-sizing: border-box; }
.wb-root { font-family: var(--font-sans); color: var(--color-ink); -webkit-font-smoothing: antialiased; }
.wb-root a { color: var(--text-link); text-decoration: none; } .wb-root a:hover { color: var(--text-link-hover); }
.wb-icon { font-family: var(--font-icon); font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; flex-shrink: 0; overflow: hidden; user-select: none; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; }
:focus-visible { outline: 2px solid var(--color-wa-green); outline-offset: 2px; }

.wb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius-input); font-family: var(--font-sans); font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast); }
.wb-root a.wb-btn, a.wb-btn { text-decoration: none; }
.wb-btn:disabled, .wb-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .45; pointer-events: none; }
.wb-btn--sm { padding: 7px 12px; font-size: 13px; } .wb-btn--md { padding: 10px 16px; font-size: 14px; } .wb-btn--lg { padding: 13px 24px; font-size: 15px; font-weight: 800; }
.wb-btn--primary, a.wb-btn--primary { background: var(--color-wa-green); color: var(--color-ink-on-green); } .wb-btn--primary:hover, a.wb-btn--primary:hover { background: var(--color-wa-green-hover); color: var(--color-ink-on-green); }
.wb-btn--secondary, a.wb-btn--secondary { background: var(--color-surface); color: var(--color-ink); border: 1.5px solid var(--color-line-input); } .wb-btn--secondary:hover, a.wb-btn--secondary:hover { background: var(--color-canvas); color: var(--color-ink); }
.wb-btn--ghost, a.wb-btn--ghost { background: transparent; color: var(--color-wa-link); } .wb-btn--ghost:hover, a.wb-btn--ghost:hover { background: var(--color-wa-tint); color: var(--color-wa-teal-dark); }
.wb-btn--soft, a.wb-btn--soft { background: var(--color-wa-tint-2); color: var(--color-wa-teal-dark); } .wb-btn--soft:hover, a.wb-btn--soft:hover { background: var(--color-wa-bubble); color: var(--color-wa-teal-dark); }
.wb-btn--dark, a.wb-btn--dark { background: var(--color-ink); color: #fff; } .wb-btn--dark:hover, a.wb-btn--dark:hover { background: var(--color-ink-2); color: #fff; }
.wb-btn--cta { box-shadow: var(--shadow-cta); }

.wb-card { border-radius: var(--radius-card); border: 1px solid var(--color-line); background: var(--color-surface); }
.wb-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 999px; font-weight: 700; padding: 3px 10px; font-size: 12px; }
.wb-badge--md { padding: 5px 11px; font-size: 13px; }
.wb-badge__dot { flex-shrink: 0; border-radius: 50%; width: 6px; height: 6px; } .wb-badge--md .wb-badge__dot { width: 7px; height: 7px; }
.wb-tone-ok { background: var(--color-ok-bg); color: var(--color-ok); } .wb-tone-warn { background: var(--color-warn-bg); color: var(--color-warn); }
.wb-tone-bad { background: var(--color-bad-bg); color: var(--color-bad); } .wb-tone-info { background: var(--color-info-bg); color: var(--color-info); }
.wb-tone-neutral, .wb-tone-unknown { background: var(--color-neutral-bg); color: var(--color-neutral); } .wb-tone-brand { background: var(--color-wa-bubble); color: var(--color-wa-teal-dark); }

.wb-seg { display: flex; gap: 4px; border-radius: var(--radius-choice); background: var(--color-line-soft); padding: 4px; }
.wb-seg__btn { flex: 1; border: 0; border-radius: 9px; background: transparent; padding: 9px 6px; font: 700 13px var(--font-sans); color: var(--color-muted); cursor: pointer; transition: color var(--dur-fast); }
.wb-seg__btn:hover { color: var(--color-ink); }
.wb-seg__btn[aria-pressed="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-segment); }

.wb-acc { border-radius: var(--radius-tile); border: 1px solid var(--color-line); background: var(--color-surface); }
.wb-acc__head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; border: 0; background: transparent; padding: 18px 20px; text-align: left; font: 700 16px/1.35 var(--font-sans); color: var(--color-ink); cursor: pointer; }
.wb-acc__body { padding: 0 20px 18px; font-size: 15px; line-height: 1.625; color: var(--color-muted); }

.wb-sum-desk { display: none; } .wb-sum-mob { display: block; }
@media (min-width: 1024px) { .wb-sum-desk { display: block; } .wb-sum-mob { display: none; } }
.wb-overline { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }

/* ── добавлено при переносе на сайт ────────────────────────────────────── */
/* Аккордеон на <details>: в макете это React-компонент с состоянием,
   на странице обходимся без JS. */
details.wb-acc > summary { list-style: none; }
details.wb-acc > summary::-webkit-details-marker { display: none; }
details.wb-acc > summary .wb-acc__chev { transition: transform var(--dur); }
details.wb-acc[open] > summary .wb-acc__chev { transform: rotate(180deg); }
/* Выпадающий список языков и подсказка — тоже на <details>. */
details.wb-pop > summary { list-style: none; } details.wb-pop > summary::-webkit-details-marker { display: none; }