/* ==========================================================================
   Miaowser — Design tokens
   Все магические числа редизайна приходят отсюда.
   ========================================================================== */

:root {
  /* ─── Colors ─────────────────────────────────────────────── */
  --mw-white:        #ffffff;
  --mw-off-white:    #fafafa;
  --mw-gray-50:      #f7f7f7;
  --mw-gray-100:     #f2f2f2;
  --mw-gray-200:     #e5e5e5;
  --mw-gray-300:     #d4d4d4;
  --mw-gray-400:     #9a9a9a;
  --mw-gray-600:     #666666;
  --mw-gray-800:     #333333;
  --mw-black:        #111111;
  --mw-true-black:   #000000;

  --mw-success: #2e7d32;
  --mw-error:   #c62828;
  --mw-warning: #ef6c00;

  --mw-bg:         var(--mw-white);
  --mw-bg-muted:   var(--mw-gray-100);
  --mw-text:       var(--mw-black);
  --mw-text-muted: var(--mw-gray-600);
  --mw-border:     var(--mw-gray-200);

  /* ─── Typography ─────────────────────────────────────────── */
  --mw-font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --mw-fs-xxs: 11px;
  --mw-fs-xs:  12px;
  --mw-fs-sm:  13px;
  --mw-fs-md:  15px;
  --mw-fs-lg:  16px;
  --mw-fs-xl:  18px;
  --mw-fs-2xl: 22px;
  --mw-fs-3xl: 28px;
  --mw-fs-4xl: 36px;
  --mw-fs-5xl: 48px;
  --mw-fs-6xl: 64px;

  --mw-lh-tight:   1.15;
  --mw-lh-snug:    1.35;
  --mw-lh-normal:  1.6;
  --mw-lh-relaxed: 1.8;

  --mw-fw-regular:  400;
  --mw-fw-medium:   500;
  --mw-fw-semibold: 600;
  --mw-fw-bold:     700;

  --mw-ls-tight:  -0.01em;
  --mw-ls-normal: 0;
  --mw-ls-wide:   0.04em;
  --mw-ls-wider:  0.08em;
  --mw-ls-widest: 0.14em;

  /* ─── Spacing (8pt base) ─────────────────────────────────── */
  --mw-space-1:  4px;
  --mw-space-2:  8px;
  --mw-space-3:  12px;
  --mw-space-4:  16px;
  --mw-space-5:  20px;
  --mw-space-6:  24px;
  --mw-space-8:  32px;
  --mw-space-10: 40px;
  --mw-space-12: 48px;
  --mw-space-16: 64px;
  --mw-space-20: 80px;
  --mw-space-24: 96px;
  --mw-space-32: 128px;

  /* ─── Layout ─────────────────────────────────────────────── */
  --mw-container:        1440px;
  --mw-container-wide:   1600px;
  --mw-container-narrow: 1100px;
  --mw-gutter:           24px;

  /* ─── Radius & borders ───────────────────────────────────── */
  --mw-border-thin:  1px;
  --mw-border-thick: 2px;
  --mw-radius-none:  0;
  --mw-radius-sm:    2px;
  --mw-radius-full:  999px;

  /* ─── Shadows ─────────────────────────────────────────────── */
  --mw-shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --mw-shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --mw-shadow-lg:  0 12px 32px rgba(0,0,0,0.12);
  --mw-shadow-xl:  0 20px 48px rgba(0,0,0,0.15);

  /* ─── Motion ─────────────────────────────────────────────── */
  --mw-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --mw-ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --mw-ease-in:    cubic-bezier(0.4, 0, 1, 1);

  --mw-duration-fast:    150ms;
  --mw-duration-normal:  250ms;
  --mw-duration-slow:    400ms;
  --mw-duration-slower:  600ms;

  /* ─── Z-index ────────────────────────────────────────────── */
  --mw-z-dropdown:  100;
  --mw-z-sticky:    1000;
  --mw-z-overlay:   2000;
  --mw-z-modal:     3000;
  --mw-z-toast:     4000;

  /* ─── Header ─────────────────────────────────────────────── */
  --mw-header-h:          88px;
  --mw-header-h-scrolled: 64px;
}