/* ============================================================
   MAT — Design Tokens
   Бренд-палитра: бело-сине-красная (по логотипу МАТ)
   ============================================================ */

:root {
  /* ---------- Colors ---------- */
  --color-white:        #ffffff;
  --color-black:        #0a0a0a;

  --color-blue-50:      #eef1ff;
  --color-blue-100:     #dde4ff;
  --color-blue-500:     #2a45d6;
  --color-blue-600:     #1f37c2;
  --color-blue-700:     #0f2bb5;   /* primary brand blue */
  --color-blue-800:     #0a228f;
  --color-blue-900:     #061875;

  --color-red-50:       #ffeceb;
  --color-red-500:      #ed3b2c;
  --color-red-600:      #e30613;   /* primary brand red */
  --color-red-700:      #c1050f;

  --color-gray-50:      #f9fafc;
  --color-gray-100:     #f4f6fa;   /* section background */
  --color-gray-200:     #e6eaf2;
  --color-gray-300:     #d2d8e5;
  --color-gray-400:     #9aa3b8;
  --color-gray-500:     #6b7388;
  --color-gray-600:     #4a5067;
  --color-gray-700:     #2f3447;
  --color-gray-800:     #1a1d2b;

  /* Semantic aliases */
  --color-bg:           var(--color-white);
  --color-bg-soft:      var(--color-gray-100);
  --color-bg-dark:      var(--color-blue-700);
  --color-text:         var(--color-black);
  --color-text-muted:   var(--color-gray-500);
  --color-text-on-dark: var(--color-white);
  --color-border:       var(--color-gray-200);
  --color-border-strong:var(--color-blue-700);
  --color-accent:       var(--color-red-600);
  --color-primary:      var(--color-blue-700);

  /* ---------- Typography ---------- */
  --font-sans:          'Manrope', 'Inter', -apple-system, BlinkMacSystemFont,
                        'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:          ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-12:              0.75rem;    /* 12 */
  --fs-13:              0.8125rem;  /* 13 */
  --fs-14:              0.875rem;   /* 14 */
  --fs-15:              0.9375rem;  /* 15 */
  --fs-16:              1rem;       /* 16 */
  --fs-18:              1.125rem;   /* 18 */
  --fs-20:              1.25rem;    /* 20 */
  --fs-24:              1.5rem;     /* 24 */
  --fs-28:              1.75rem;    /* 28 */
  --fs-32:              2rem;       /* 32 */
  --fs-40:              2.5rem;     /* 40 */
  --fs-48:              3rem;       /* 48 */
  --fs-56:              3.5rem;     /* 56 */
  --fs-64:              4rem;       /* 64 */
  --fs-72:              4.5rem;     /* 72 */

  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-extrabold:       800;
  --fw-black:           900;

  --lh-tight:           1.1;
  --lh-snug:            1.25;
  --lh-normal:          1.5;
  --lh-relaxed:         1.625;

  --tracking-tight:     -0.03em;
  --tracking-snug:      -0.01em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;

  /* ---------- Spacing (4px scale) ---------- */
  --sp-1:               0.25rem;    /* 4  */
  --sp-2:               0.5rem;     /* 8  */
  --sp-3:               0.75rem;    /* 12 */
  --sp-4:               1rem;       /* 16 */
  --sp-5:               1.25rem;    /* 20 */
  --sp-6:               1.5rem;     /* 24 */
  --sp-8:               2rem;       /* 32 */
  --sp-10:              2.5rem;     /* 40 */
  --sp-12:              3rem;       /* 48 */
  --sp-16:              4rem;       /* 64 */
  --sp-20:              5rem;       /* 80 */
  --sp-24:              6rem;       /* 96 */
  --sp-32:              8rem;       /* 128 */

  /* ---------- Layout ---------- */
  --container-max:      1280px;
  --container-pad:      var(--sp-6);
  --section-pad-y:      clamp(var(--sp-16), 8vw, var(--sp-32));

  /* ---------- Radius ---------- */
  --radius-sm:          6px;
  --radius-md:          12px;
  --radius-lg:          20px;
  --radius-xl:          28px;
  --radius-pill:        999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:          0 1px 2px rgba(15, 43, 181, 0.04);
  --shadow-sm:          0 2px 8px rgba(15, 43, 181, 0.06),
                        0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md:          0 10px 24px rgba(15, 43, 181, 0.08),
                        0 2px 6px rgba(10, 10, 10, 0.04);
  --shadow-lg:          0 24px 48px rgba(15, 43, 181, 0.12),
                        0 4px 12px rgba(10, 10, 10, 0.06);
  --shadow-glow-blue:   0 0 0 1px rgba(15, 43, 181, 0.08),
                        0 12px 32px rgba(15, 43, 181, 0.16);

  /* ---------- Motion ---------- */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:           160ms;
  --dur-base:           240ms;
  --dur-slow:           480ms;

  /* ---------- Z-index ---------- */
  --z-base:             1;
  --z-sticky:           50;
  --z-overlay:          100;
  --z-modal:            200;
  --z-toast:            300;
}