/* ==========================================================================
   Loncin XWolf Design System — Tokens
   Палитра бренда — брендбук BB_Loncin 2025 (2.6). UI-нейтрали заданы
   с лёгким холодным графитовым подтоном как контр-пара к тёплому акценту.
   ========================================================================== */

:root {
  /* --- Фирменные цвета (брендбук, неизменны) --- */
  --brand-accent:      #E94F25;
  --brand-red:         #E6233C;
  --brand-graphite:    #333333;
  --brand-grey:        #757475;
  --brand-grey-mid:    #A1A1A1;
  --brand-grey-light:  #C9CACA;
  --brand-grey-faint:  #EEEEEF;

  /* --- Нейтральная шкала (холодный графитовый подтон) --- */
  --n-0:   #FFFFFF;
  --n-50:  #F6F7F9;
  --n-100: #EDEFF2;
  --n-200: #DFE2E7;
  --n-300: #C7CBD2;
  --n-400: #9BA0A9;
  --n-500: #6E727B;
  --n-600: #52565E;
  --n-700: #3B3E44;
  --n-800: #2C2E33;
  --n-900: #1E2024;
  --n-950: #131417;

  /* --- Акцент: состояния --- */
  --accent:        var(--brand-accent);
  --accent-hover:  #D8451F;
  --accent-active: #BE3B19;
  --accent-tint:   #FCEDE8;
  --accent-strong: #C23A18;
  --on-accent:     #FFFFFF;

  /* --- Семантика (CMS, статусы) --- */
  --color-success: #1F8A54;
  --color-warning: #B26C10;
  --color-danger:  #D91E36;
  --color-info:    #2563B4;
  --tint-success:  #E7F4EC;
  --tint-warning:  #FaF1E1;
  --tint-danger:   #FCEAEC;
  --tint-info:     #E9F0FA;

  /* --- Типографика --- */
  --font-sans: "Roboto", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-display: clamp(2.9rem, 7.5vw, 5.75rem);
  --text-h1: clamp(2.1rem, 4.6vw, 3.25rem);
  --text-h2: clamp(1.6rem, 3.1vw, 2.25rem);
  --text-h3: 1.3125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;
  --leading-tight: 1.0;
  --leading-heading: 1.12;
  --leading-body: 1.62;
  --tracking-display: -0.02em;
  --tracking-tight: -0.011em;
  --tracking-eyebrow: 0.16em;

  /* --- Отступы (модуль 4px) --- */
  --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;

  /* --- Форма --- */
  --radius-s: 5px;
  --radius-m: 9px;
  --radius-l: 16px;
  --radius-xl: 22px;
  --container: 1200px;
  --container-wide: 1440px;
  --gutter: clamp(20px, 4vw, 40px);
  --control-h: 46px;
  --control-h-lg: 54px;

  /* --- Тени: мягкие, многослойные, нейтральные (без цветных свечений) --- */
  --shadow-xs: 0 1px 2px rgba(19, 20, 23, 0.05);
  --shadow-1: 0 1px 2px rgba(19, 20, 23, 0.04), 0 2px 6px -1px rgba(19, 20, 23, 0.06);
  --shadow-2: 0 4px 8px -3px rgba(19, 20, 23, 0.08), 0 10px 24px -6px rgba(19, 20, 23, 0.10);
  --shadow-3: 0 8px 16px -6px rgba(19, 20, 23, 0.10), 0 28px 56px -14px rgba(19, 20, 23, 0.20);
  --ring: 0 0 0 3px var(--accent-tint);

  /* --- Движение --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 520ms;

  /* --- Слои --- */
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* --- Роли: светлая тема (по умолчанию) --- */
  color-scheme: light;
  --bg:            #FFFFFF;
  --bg-subtle:     var(--n-50);
  --bg-sunken:     var(--n-100);
  --surface:       #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-inset: var(--n-50);
  --text:          #212327;
  --text-secondary: var(--n-500);
  --text-faint:    var(--n-400);
  --border:        #E6E8EC;
  --border-soft:   #EEF0F3;
  --border-strong: #CDD0D6;
  --scrim:         rgba(17, 18, 21, 0.5);
  --header-bg:     rgba(255, 255, 255, 0.82);
  --hairline:      rgba(19, 20, 23, 0.06);
}

/* --- Тёмная тема (публичный сайт) --- */
[data-theme="dark"] {
  color-scheme: dark;
  --accent:        #FA6A3C;
  --accent-hover:  #FF7A4E;
  --accent-active: #E9531F;
  --accent-tint:   rgba(250, 106, 60, 0.15);
  --accent-strong: #FF7A4E;

  --bg:            #101114;
  --bg-subtle:     #16181C;
  --bg-sunken:     #0B0C0E;
  --surface:       #191B1F;
  --surface-raised: #202329;
  --surface-inset: #131418;
  --text:          #F4F5F6;
  --text-secondary: #A2A7B0;
  --text-faint:    #71767F;
  --border:        #2A2D33;
  --border-soft:   #232529;
  --border-strong: #3C4048;
  --header-bg:     rgba(16, 17, 20, 0.78);
  --hairline:      rgba(255, 255, 255, 0.07);

  --tint-success:  rgba(31, 138, 84, 0.18);
  --tint-warning:  rgba(178, 108, 16, 0.20);
  --tint-danger:   rgba(217, 30, 54, 0.18);
  --tint-info:     rgba(37, 99, 180, 0.20);
  --color-success: #4FC488;
  --color-warning: #E0A64C;
  --color-danger:  #FF6178;
  --color-info:    #6BA6E8;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 24px 56px -16px rgba(0, 0, 0, 0.65);
  --ring: 0 0 0 3px var(--accent-tint);
}