/* ============================================================
   Дизайн-токены — Усть-Джегутинский гипсовый комбинат
   Источник: DESIGN-SYSTEM.md (реконструкция из Figma cKj6AjTCsWJiiszMFAZ6Be)
   Не хардкодить значения в styles.css — только var(--...).
   ============================================================ */

:root {
  /* ---------- Цвет: примитивы ---------- */
  --color-brand-50:  #eef4ff;
  --color-brand-100: #dce8fb;
  --color-brand-200: #b9d1f5;
  --color-brand-300: #8ab0eb;
  --color-brand-400: #4f85d8;
  --color-brand-500: #2f65b5;
  --color-brand-600: #1d4f91;
  --color-brand-700: #173f73;
  --color-brand-800: #13345e;
  --color-brand-900: #0d2442;

  --color-accent-50:  #fff8eb;
  --color-accent-100: #fcebc9;
  --color-accent-300: #efc06f;
  --color-accent-400: #e6a64b;
  --color-accent-500: #d99332;
  --color-accent-600: #c47b20;
  --color-accent-700: #9d6117;

  --color-neutral-0:    #ffffff;
  --color-neutral-50:   #f8f9fb;
  --color-neutral-100:  #f1f3f6;
  --color-neutral-150:  #e9edf2;
  --color-neutral-200:  #dfe4ea;
  --color-neutral-300:  #cbd2db;
  --color-neutral-400:  #98a2b0;
  --color-neutral-500:  #707b89;
  --color-neutral-600:  #596473;
  --color-neutral-700:  #354052;
  --color-neutral-900:  #172133;
  --color-neutral-1000: #000000;

  --color-overlay-hero:     rgba(13, 36, 66, 0.64);
  --color-overlay-dark:     rgba(26, 27, 29, 0.30);
  --color-overlay-hairline: rgba(255, 255, 255, 0.5);
  --color-overlay-glass:    rgba(9, 29, 54, 0.76);
  --color-overlay-glass-soft: rgba(255, 255, 255, 0.09);
  --color-overlay-card:     rgba(255, 255, 255, 0.82);

  --gradient-hero: linear-gradient(90deg, rgba(7, 25, 48, 0.90) 0%, rgba(13, 36, 66, 0.62) 48%, rgba(13, 36, 66, 0.18) 100%);
  --gradient-page-hero: linear-gradient(0deg, rgba(7, 25, 48, 0.90) 0%, rgba(13, 36, 66, 0.36) 72%);
  --gradient-why: linear-gradient(105deg, rgba(7, 25, 48, 0.96) 0%, rgba(13, 36, 66, 0.76) 58%, rgba(13, 36, 66, 0.52) 100%);

  --color-success-600: #1b7f4b;
  --color-warning-700: #b45309;
  --color-danger-600:  #b3261e;
  --color-success-50:  #eaf6ef;
  --color-warning-50:  #fdf4e7;
  --color-danger-50:   #fdeceb;

  /* ---------- Цвет: семантика ---------- */
  --surface-page:       var(--color-neutral-0);
  --surface-muted:      var(--color-neutral-50);
  --surface-card:       var(--color-neutral-0);
  --surface-card-media: linear-gradient(145deg, var(--color-neutral-0), var(--color-neutral-100));
  --surface-inverse:    var(--color-brand-900);
  --surface-accent:     var(--color-accent-500);
  --surface-glass:      var(--color-overlay-glass);
  --surface-glass-soft: var(--color-overlay-glass-soft);

  --text-primary:     var(--color-neutral-900);
  --text-strong:      var(--color-neutral-1000);
  --text-secondary:   var(--color-neutral-700);
  --text-muted:       var(--color-neutral-600);
  --text-placeholder: var(--color-neutral-600);
  --text-on-brand:    var(--color-neutral-0);
  --text-on-accent:   var(--color-brand-900);
  --text-on-media:    var(--color-neutral-0);
  --text-link:        var(--color-brand-600);
  --text-link-hover:  var(--color-brand-700);

  --border-subtle:   var(--color-neutral-200);
  --border-default:  var(--color-neutral-300);
  --border-strong:   var(--color-neutral-500);
  --border-on-media: var(--color-overlay-hairline);
  --border-glass:    rgba(255, 255, 255, 0.18);

  --action-bg:          var(--color-accent-500);
  --action-bg-hover:    var(--color-accent-600);
  --action-bg-active:   var(--color-accent-700);
  --action-bg-disabled: var(--color-neutral-300);
  --action-fg:          var(--text-on-accent);
  --action-fg-disabled: var(--color-neutral-600);

  --focus-ring:         var(--color-accent-400);
  --focus-ring-on-dark: var(--color-neutral-0);

  /* ---------- Типографика ---------- */
  --font-family-base: 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  --font-size-2xs: 12px;
  --font-size-xs:  14px;
  --font-size-sm:  16px;
  --font-size-md:  18px;
  --font-size-lg:  20px;
  --font-size-xl:  24px;
  --font-size-2xl: 30px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  --font-size-display: clamp(42px, 5.2vw, 76px);
  --font-size-section: clamp(34px, 3.8vw, 54px);

  --line-height-tight:   1.15;
  --line-height-heading: 1.25;
  --line-height-snug:    1.4;
  --line-height-body:    1.5;

  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-caps:   0.02em;
  --letter-spacing-display: -0.035em;

  /* ---------- Отступы (4pt) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-40: 160px;

  /* ---------- Радиусы ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;
  --radius-hero-bottom: 600px;

  /* ---------- Границы ---------- */
  --border-width-hairline: 1px;
  --border-width-thick:    2px;

  /* ---------- Иконки ---------- */
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 40px;
  --icon-xl: 56px;

  /* ---------- Контролы ---------- */
  --control-height-sm: 32px;
  --control-height-md: 52px;
  --control-padding-x: var(--space-6);

  /* ---------- Тени ---------- */
  --elevation-0: none;
  --elevation-1: 0 2px 8px rgba(13, 36, 66, 0.06);
  --elevation-2: 0 12px 30px rgba(13, 36, 66, 0.10);
  --elevation-3: 0 22px 54px rgba(13, 36, 66, 0.16);
  --elevation-accent: 0 12px 28px rgba(196, 123, 32, 0.25);

  /* ---------- Слои ---------- */
  --z-base: 0;
  --z-sticky-header: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;

  /* ---------- Движение ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --easing-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --easing-enter:    cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Брейкпоинты (справочно, для media-query нужны литералы) ---------- */
  --breakpoint-sm:  480px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1440px;

  /* ---------- Сетка ---------- */
  --container-max:     1280px;
  --container-padding: var(--space-8);
  --grid-columns: 12;
  --grid-gutter:  var(--space-6);

  /* ---------- Вертикальный ритм ---------- */
  --section-padding-y:      var(--space-24);
  --section-padding-y-lg:   var(--space-30);
  --section-gap-heading:    var(--space-12);
  --block-gap:              var(--space-8);

  /* ---------- Эффекты ---------- */
  --glass-blur: 18px;
}