/* ===========================================================
   DESIGN TOKENS
   Источник: UI-kit из Figma + согласованная design system
   =========================================================== */

:root {
  /* ----- Gray scale (UI-kit) ----- */
  --gray-000: #F6F8FA;
  --gray-100: #EAEEF2;
  --gray-200: #D0D7DE;
  --gray-300: #AFB8C1;
  --gray-400: #8C959F;
  --gray-500: #6E7781;
  --gray-600: #57606A;
  --gray-700: #424A53;
  --gray-800: #32383F;
  --gray-900: #24292F;

  /* ----- Brand (UI-kit) ----- */
  --blue:         #2249FF; /* enabled */
  --blue-hover:   #3D60FF; /* hovered */
  --blue-pressed: #002CFE; /* pressed */
  --blue-soft:    rgba(34, 73, 255, 0.08);

  /* ----- Semantic (с макета, могут меняться) ----- */
  --green:    #1FAB4C;   /* текст / обводка / положительные */
  --green-bg: #22A957;   /* solid card "К выплате" + hover Excel */
  --red:      #E5484D;   /* текст / обводка / отрицательные */
  --red-bg:   #ED1C24;   /* hover PDF */

  /* ----- Surfaces ----- */
  --bg:             var(--gray-000);
  --surface:        #FFFFFF;
  --border:         var(--gray-100);
  --border-strong:  var(--gray-200);
  --overlay:        rgba(36, 41, 47, 0.10);

  /* ----- Text ----- */
  --text:        var(--gray-900);
  --text-muted:  var(--gray-500);
  --text-dim:    var(--gray-400);

  /* ----- Radii ----- */
  --r-sm:   8px;   /* инпуты, кнопки xsmall */
  --r-md:  12px;   /* кнопки small */
  --r-lg:  16px;   /* кнопки medium, карточки, модалки */
  --r-pill: 9999px;

  /* ----- Shadows (Material Elevation) ----- */
  --shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0px 1px 3px rgba(0, 0, 0, 0.15),
              0px 1px 2px rgba(0, 0, 0, 0.30);
  /* Мягкий вариант для светлого фона (используется на карточках) */
  --shadow-card:    0 1px 2px rgba(16, 24, 40, 0.06),
                    0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-popover: 0 4px 6px -2px rgba(16, 24, 40, 0.04),
                    0 12px 24px -4px rgba(16, 24, 40, 0.10);

  /* ----- Spacing scale (кратно 4) ----- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ----- Typography ----- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;

  /* ----- Motion ----- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 0.12s;
  --dur:      0.18s;
  --dur-slow: 0.25s;
}

/* ===========================================================
   TYPOGRAPHY UTILITIES
   =========================================================== */

.t-h1 {
  font-size: 64px;
  line-height: 72px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.t-h3 {
  font-size: 32px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.t-h5 {
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
}
.t-body {
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
}
.t-card-caption {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}
.t-chip {
  font-size: 12px;
  line-height: 13px;
  font-weight: 400;
}