/* ============================================================================
   MIRRIM Design System — КАНОН  (v2, 2026-05-23)
   Источник истины: Figma «Foundations / components» (экспорт 23.05.2026).
   Токены --mirrim-* перенесены ДОСЛОВНО из макета. НЕ менять значения вручную —
   только пере-экспортом из Figma. Все новые страницы и страницы, обновляемые по
   запросу, обязаны использовать ТОЛЬКО эти токены/классы. См. DESIGN_SYSTEM.md.
   Подключение:  <link rel="stylesheet" href="/static/css/mirrim-ds.css">
   ========================================================================== */

/* ── Manrope (self-hosted, variable 200–800, Latin + Cyrillic) ───────────── */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/manrope-cyrillic-var.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/manrope-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Токены (--mirrim-*) — ДОСЛОВНО из Figma ──────────────────────────────── */
:root {
  /* purple scale */
  --mirrim-purple-50:  #F4F0FF;
  --mirrim-purple-100: #E7DEFF;
  --mirrim-purple-200: #C9B8FF;
  --mirrim-purple-300: #A78BFA;
  --mirrim-purple-400: #A78BFA;
  --mirrim-purple-500: #7C3AED;
  --mirrim-purple-600: #5B21B6;   /* основной бренд-фиолетовый */
  --mirrim-purple-700: #5B21B6;
  --mirrim-purple-800: #4C1D95;
  --mirrim-purple-900: #2E1065;

  /* lime accent */
  --mirrim-lime-400: #D4FB58;
  --mirrim-lime-500: #C6F432;     /* основной лайм-акцент */
  --mirrim-lime-600: #A8D920;

  /* neutrals (ink) */
  --mirrim-ink-50:  #F7F7F8;
  --mirrim-ink-100: #F2F2F4;
  --mirrim-ink-200: #E5E5E5;
  --mirrim-ink-300: #C7C7C7;
  --mirrim-ink-400: #9A9A9A;
  --mirrim-ink-500: #6B6B6B;
  --mirrim-ink-700: #2A2A2A;
  --mirrim-ink-900: #0A0A0A;      /* основной текст */

  /* surfaces / on-purple */
  --mirrim-canvas:          #FFFFFF;
  --mirrim-on-purple:       #FFFFFF;
  --mirrim-on-purple-soft:  rgba(255,255,255,.72);
  --mirrim-on-purple-mute:  rgba(255,255,255,.55);
  --mirrim-on-purple-line:  rgba(255,255,255,.16);
  --mirrim-card-on-purple:  rgba(255,255,255,.10);
  --mirrim-chip-on-purple:  rgba(255,255,255,.14);

  /* semantic */
  --mirrim-info:        #2563EB;
  --mirrim-error:       #EF4444;
  --mirrim-error-soft:  #FCA5A5;
  --mirrim-success:     #5DD33C;
  --mirrim-success-bg:  #6FE043;

  /* radius */
  --mirrim-radius-xs:       8px;
  --mirrim-radius-sm:       12px;
  --mirrim-radius-md:       16px;
  --mirrim-radius-lg:       20px;
  --mirrim-radius-xl:       24px;
  --mirrim-radius-2xl:      28px;
  --mirrim-radius-pill:     999px;
  --mirrim-radius-squircle: 22%;

  /* spacing */
  --mirrim-sp-1:  4px;
  --mirrim-sp-2:  8px;
  --mirrim-sp-3:  12px;
  --mirrim-sp-4:  16px;
  --mirrim-sp-5:  20px;
  --mirrim-sp-6:  24px;
  --mirrim-sp-8:  32px;
  --mirrim-sp-10: 40px;
  --mirrim-screen-pad:   20px;
  --mirrim-bottom-nav-h: 84px;

  /* shadows */
  --mirrim-shadow-card:  0 4px 24px rgba(20, 10, 60, .08);
  --mirrim-shadow-cta:   0 10px 24px -8px rgba(124, 58, 237, .45);
  --mirrim-shadow-lime:  0 10px 24px -8px rgba(168, 217, 32, .55);
  --mirrim-shadow-float: 0 18px 50px -16px rgba(20, 10, 60, .35);

  /* gradients */
  --mirrim-grad-purple-card:   linear-gradient(160deg, #A78BFA 0%, #7C3AED 60%, #5B21B6 100%);
  --mirrim-grad-purple-screen: radial-gradient(120% 80% at 50% 0%, #A78BFA 0%, #7C3AED 35%, #5B21B6 100%);
  --mirrim-grad-lavender-screen: linear-gradient(180deg, #D9C8FF 0%, #C9B0FF 100%);
  --mirrim-grad-lime-rays:     repeating-conic-gradient(from 90deg at 50% 50%, #6FE043 0deg, #6FE043 14deg, #5DD33C 14deg, #5DD33C 28deg);

  /* fonts */
  --mirrim-font-display: "Manrope", system-ui, sans-serif;
  --mirrim-font-text:    "Manrope", system-ui, sans-serif;

  /* type (font-shorthand: weight size/line-height family) */
  --mirrim-text-d1:        800 34px/1.05 "Manrope", system-ui, sans-serif;
  --mirrim-text-d2:        800 28px/1.1  "Manrope", system-ui, sans-serif;
  --mirrim-text-d3:        800 22px/1.2  "Manrope", system-ui, sans-serif;
  --mirrim-text-h1:        700 20px/1.25 "Manrope", system-ui, sans-serif;
  --mirrim-text-h2:        700 17px/1.3  "Manrope", system-ui, sans-serif;
  --mirrim-text-body:      500 15px/1.4  "Manrope", system-ui, sans-serif;
  --mirrim-text-body-bold: 700 15px/1.4  "Manrope", system-ui, sans-serif;
  --mirrim-text-caption:   500 13px/1.3  "Manrope", system-ui, sans-serif;
  --mirrim-text-micro:     600 11px/1.2  "Manrope", system-ui, sans-serif;
}

/* ── База ─────────────────────────────────────────────────────────────────
   Не навязываем глобальный reset страницам, которые подключают канон поверх
   своих стилей — поэтому базовые правила скоупим под .mrm (контейнер) и даём
   утилиты. Хочешь применить шрифт ко всей странице — добавь class="mrm" на body.
   ------------------------------------------------------------------------- */
.mrm, .mrm * { box-sizing: border-box; }
/* Атрибут hidden должен скрывать элемент, даже если класс задаёт display
   (иначе модалки/баннеры с hidden не прячутся). Скоупим под .mrm, как базовые. */
.mrm [hidden], .mrm[hidden] { display: none !important; }
.mrm {
  font: var(--mirrim-text-body);
  color: var(--mirrim-ink-900);
  background: var(--mirrim-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Типографика (утилиты) ────────────────────────────────────────────────── */
.mrm-d1   { font: var(--mirrim-text-d1);        letter-spacing: -.02em; margin: 0; }
.mrm-d2   { font: var(--mirrim-text-d2);        letter-spacing: -.02em; margin: 0; }
.mrm-d3   { font: var(--mirrim-text-d3);        letter-spacing: -.01em; margin: 0; }
.mrm-h1   { font: var(--mirrim-text-h1);        margin: 0; }
.mrm-h2   { font: var(--mirrim-text-h2);        margin: 0; }
.mrm-body { font: var(--mirrim-text-body);      margin: 0; }
.mrm-body-bold { font: var(--mirrim-text-body-bold); margin: 0; }
.mrm-caption   { font: var(--mirrim-text-caption); color: var(--mirrim-ink-500); margin: 0; }
.mrm-micro {
  font: var(--mirrim-text-micro);
  letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--mirrim-ink-400); margin: 0;
}

/* ── Кнопки ───────────────────────────────────────────────────────────────
   Figma: 4 состояния × 3 размера, радиус pill (999px), иконка опц. слева/справа.
   ------------------------------------------------------------------------- */
.mrm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mirrim-sp-2);
  font: var(--mirrim-text-body-bold);
  height: 44px; padding: 0 var(--mirrim-sp-5);
  border: 0; border-radius: var(--mirrim-radius-pill);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.mrm-btn:active { transform: scale(.97); }
.mrm-btn--sm { height: 36px; padding: 0 var(--mirrim-sp-4); font: var(--mirrim-text-caption); font-weight: 700; }
.mrm-btn--lg { height: 52px; padding: 0 var(--mirrim-sp-6); font: var(--mirrim-text-h2); }

/* primary — фиолетовый CTA */
.mrm-btn--primary {
  background: var(--mirrim-grad-purple-card);
  color: var(--mirrim-on-purple);
  box-shadow: var(--mirrim-shadow-cta);
}
.mrm-btn--primary:hover { box-shadow: var(--mirrim-shadow-float); }

/* lime — акцентный CTA */
.mrm-btn--lime {
  background: var(--mirrim-lime-500);
  color: var(--mirrim-ink-900);
  box-shadow: var(--mirrim-shadow-lime);
}

/* secondary — мягкий фиолетовый */
.mrm-btn--secondary {
  background: var(--mirrim-purple-50);
  color: var(--mirrim-purple-700);
}
.mrm-btn--secondary:hover { background: var(--mirrim-purple-100); }

/* ghost — «без обводки» */
.mrm-btn--ghost {
  background: transparent;
  color: var(--mirrim-purple-700);
}
.mrm-btn--ghost:hover { background: var(--mirrim-purple-50); }

/* disabled — opacity .45 (по макету) */
.mrm-btn:disabled, .mrm-btn.is-disabled {
  opacity: .45; pointer-events: none; box-shadow: none;
}

/* ── Теги / чипы ──────────────────────────────────────────────────────────
   Жанровый pill. На светлом — ink-100; на фиолетовом фоне — полупрозрачный blur.
   ------------------------------------------------------------------------- */
.mrm-tag {
  display: inline-flex; align-items: center; gap: var(--mirrim-sp-1);
  font: var(--mirrim-text-caption); font-weight: 600;
  height: 26px; padding: 0 var(--mirrim-sp-3);
  border-radius: var(--mirrim-radius-pill);
  background: var(--mirrim-ink-100); color: var(--mirrim-ink-700);
}
.mrm-tag--on-purple {
  background: var(--mirrim-chip-on-purple);
  color: var(--mirrim-on-purple-soft);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mrm-tag--lime  { background: var(--mirrim-lime-500); color: var(--mirrim-ink-900); }

/* ── Инпуты ───────────────────────────────────────────────────────────────── */
.mrm-input {
  width: 100%;
  font: var(--mirrim-text-body);
  height: 48px; padding: 0 var(--mirrim-sp-4);
  color: var(--mirrim-ink-900);
  background: var(--mirrim-canvas);
  border: 1px solid var(--mirrim-ink-200);
  border-radius: var(--mirrim-radius-md);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.mrm-input::placeholder { color: var(--mirrim-ink-400); }
.mrm-input:focus {
  border-color: var(--mirrim-purple-500);
  box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}
.mrm-input.is-error { border-color: var(--mirrim-error); }
.mrm-input.is-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.18); }

/* ── Карточки ─────────────────────────────────────────────────────────────── */
.mrm-card {
  background: var(--mirrim-canvas);
  border-radius: var(--mirrim-radius-xl);
  box-shadow: var(--mirrim-shadow-card);
  padding: var(--mirrim-sp-5);
}
.mrm-card--purple {
  background: var(--mirrim-grad-purple-card);
  color: var(--mirrim-on-purple);
  box-shadow: var(--mirrim-shadow-float);
}
.mrm-card--squircle { border-radius: var(--mirrim-radius-squircle); }

/* ── Экран (фиолетовый hero-фон) ──────────────────────────────────────────── */
.mrm-screen {
  min-height: 100dvh;
  padding: var(--mirrim-screen-pad);
  background: var(--mirrim-grad-purple-screen);
  color: var(--mirrim-on-purple);
}
.mrm-screen--light    { background: var(--mirrim-ink-50); color: var(--mirrim-ink-900); }
.mrm-screen--lavender { background: var(--mirrim-grad-lavender-screen); color: var(--mirrim-ink-900); }

/* ── Бейджи возраста / роли ───────────────────────────────────────────────── */
.mrm-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--mirrim-text-micro); letter-spacing: 0;
  min-width: 28px; height: 22px; padding: 0 var(--mirrim-sp-2);
  border-radius: var(--mirrim-radius-pill);
  background: var(--mirrim-ink-900); color: var(--mirrim-on-purple);
}
.mrm-badge--lime    { background: var(--mirrim-lime-500); color: var(--mirrim-ink-900); }
.mrm-badge--captain { background: var(--mirrim-purple-600); color: var(--mirrim-on-purple); }
.mrm-badge--member  { background: var(--mirrim-purple-100); color: var(--mirrim-purple-700); }