/* =============================================================================
   АРСИ — Design tokens
   Источник истины: brandbook/АРСИ.pdf + brandbook/archive26-08-19*.zip
   Документация: docs/design-system.md
   Не редактируйте значения в компонентах — только здесь.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. ШРИФТЫ
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Unbounded';
  src: url('/brand/fonts/unbounded-var.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Robtronika';
  src: url('/brand/fonts/robtronika-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Robtronika';
  src: url('/brand/fonts/robtronika-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Текстовая гарнитура — подключается из Google Fonts или локально.
   См. design-system.md §3.1 «Почему добавлен Inter». */

:root {
  --font-display: 'Robtronika', 'Unbounded', system-ui, sans-serif;
  --font-heading: 'Unbounded', system-ui, sans-serif;
  --font-text: 'Inter', 'Unbounded', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
}

/* -----------------------------------------------------------------------------
   2. ПАЛИТРА (примитивы)
   -------------------------------------------------------------------------- */

:root {
  /* Фирменные константы — брендбук, стр. 1. Менять нельзя. */
  --brand-orange: #FF6600;
  --brand-black:  #000000;
  --brand-white:  #FFFFFF;

  /* Оранжевая шкала, тон 24° */
  --orange-50:  #FFF3EB;
  --orange-100: #FFE7D6;
  --orange-200: #FFCDAB;
  --orange-300: #FFAB73;
  --orange-400: #FF8533;
  --orange-500: #FF6600;  /* = --brand-orange */
  --orange-600: #DB5800;
  --orange-700: #B84900;  /* минимум для оранжевого текста на белом (5.26:1) */
  --orange-800: #8F3900;
  --orange-900: #662900;

  /* Нейтральная шкала (тёплая) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAF9;
  --neutral-100: #F4F4F3;
  --neutral-150: #EFEFEF;  /* фон разворотов брендбука */
  --neutral-200: #E4E3E2;
  --neutral-300: #CCCCCC;  /* серый из брендбука (контурный знак) */
  --neutral-400: #A8A6A4;
  --neutral-500: #87857F;
  --neutral-600: #6B6966;
  --neutral-700: #4A4948;
  --neutral-800: #2B2A29;  /* серый из логотипа (дескриптор) */
  --neutral-900: #1A1918;
  --neutral-950: #111110;
  --neutral-ink: #141312;  /* фон тёмной темы */

  /* Статусы */
  --success-50:  #ECFDF3;  --success-500: #16A34A;  --success-600: #0F8A4A;  --success-300: #22C55E;
  --warning-50:  #FEFCE8;  --warning-500: #EAB308;  --warning-600: #A16207;  --warning-300: #FBBF24;
  --danger-50:   #FEF2F2;  --danger-500:  #E02424;  --danger-600:  #C81E1E;  --danger-300:  #F87171;
  --info-50:     #EFF6FF;  --info-500:    #2563EB;  --info-600:    #1B62C7;  --info-300:    #60A5FA;
}

/* -----------------------------------------------------------------------------
   3. СЕМАНТИЧЕСКИЕ ЦВЕТА — светлая тема (по умолчанию)

   `.on-light` позволяет вернуть светлую тему вложенно — например, белой
   карточке формы внутри тёмной секции `.on-dark`. Без этого потомки наследуют
   тёмные токены и получают тёмный фон подсказок на белом фоне.
   -------------------------------------------------------------------------- */

:root,
.on-light {
  --color-bg:            var(--neutral-0);
  --color-bg-subtle:     var(--neutral-50);
  --color-bg-muted:      var(--neutral-100);
  --color-bg-inset:      var(--neutral-150);
  --color-bg-inverse:    var(--neutral-ink);

  --color-surface:       var(--neutral-0);
  --color-surface-hover: var(--neutral-50);
  --color-surface-sunken: var(--neutral-100);

  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-hover:  var(--neutral-400);

  --color-text:           var(--neutral-900);
  --color-text-secondary: var(--neutral-700);
  --color-text-muted:     var(--neutral-600);
  --color-text-disabled:  var(--neutral-400);
  --color-text-inverse:   var(--neutral-0);
  --color-text-on-accent: var(--neutral-900); /* ЧЁРНЫЙ на оранжевом, не белый! */

  --color-accent:          var(--orange-500);
  --color-accent-hover:    var(--orange-600);
  --color-accent-pressed:  var(--orange-700);
  --color-accent-subtle:   var(--orange-50);
  --color-accent-border:   var(--orange-200);
  --color-accent-text:     var(--orange-700); /* оранжевый ТЕКСТ на светлом фоне */

  --color-focus-ring:     var(--orange-700);

  --color-success:      var(--success-600);
  --color-success-bg:   var(--success-50);
  --color-warning:      var(--warning-600);
  --color-warning-bg:   var(--warning-50);
  --color-danger:       var(--danger-600);
  --color-danger-bg:    var(--danger-50);
  --color-info:         var(--info-600);
  --color-info-bg:      var(--info-50);

  /* Логотип */
  --logo-ink:    var(--brand-black);
  --logo-accent: var(--brand-orange);
}

/* Светлый остров внутри тёмной секции должен перекрасить и сам текст:
   переопределения переменных недостаточно — цвет наследуется от родителя. */
.on-light { color: var(--color-text); background-color: var(--color-surface); }

/* -----------------------------------------------------------------------------
   4. СЕМАНТИЧЕСКИЕ ЦВЕТА — тёмная тема / инверсные блоки
   Применяется к [data-theme="dark"] и к .on-dark (шапка, футер, hero).
   -------------------------------------------------------------------------- */

[data-theme='dark'],
.on-dark {
  --color-bg:            var(--neutral-ink);
  --color-bg-subtle:     var(--neutral-900);
  --color-bg-muted:      #1F1E1C;
  --color-bg-inset:      #111110;
  --color-bg-inverse:    var(--neutral-0);

  --color-surface:       #1F1E1C;
  --color-surface-hover: #26241F;
  --color-surface-sunken: #111110;

  --color-border:        #34322F;
  --color-border-strong: var(--neutral-700);
  --color-border-hover:  var(--neutral-600);

  --color-text:           var(--neutral-100);
  --color-text-secondary: #C9C6C2;
  --color-text-muted:     var(--neutral-400);
  --color-text-disabled:  var(--neutral-600);
  --color-text-inverse:   var(--neutral-900);
  --color-text-on-accent: var(--neutral-900);

  --color-accent:          var(--orange-500);
  --color-accent-hover:    var(--orange-400);
  --color-accent-pressed:  var(--orange-300);
  --color-accent-subtle:   #2A1A0D;
  --color-accent-border:   #5C2E00;
  --color-accent-text:     var(--orange-400);

  --color-focus-ring:     var(--orange-400);

  --color-success:   var(--success-300);  --color-success-bg: #0E2A1A;
  --color-warning:   var(--warning-300);  --color-warning-bg: #2B2109;
  --color-danger:    var(--danger-300);   --color-danger-bg:  #2E1414;
  --color-info:      var(--info-300);     --color-info-bg:    #10203A;

  --logo-ink: var(--brand-white);
}

/* -----------------------------------------------------------------------------
   5. ТИПОГРАФИКА
   -------------------------------------------------------------------------- */

:root {
  /* Плавные размеры: min при 360px, max при 1280px */
  --text-display-2xl: clamp(2.5rem, 1.35rem + 5.1vw, 4rem);      /* 40 → 64 */
  --text-display-xl:  clamp(2rem,   1.16rem + 3.7vw, 3.25rem);   /* 32 → 52 */
  --text-display-lg:  clamp(1.75rem, 1.1rem + 2.9vw, 2.75rem);   /* 28 → 44 */

  --text-h1: clamp(1.75rem, 1.15rem + 2.7vw, 2.5rem);   /* 28 → 40 */
  --text-h2: clamp(1.5rem,  1.08rem + 1.9vw, 2rem);     /* 24 → 32 */
  --text-h3: clamp(1.25rem, 1.0rem + 1.1vw, 1.5625rem); /* 20 → 25 */
  --text-h4: 1.25rem;   /* 20 */
  --text-h5: 1.0625rem; /* 17 */

  --text-body-lg: 1.125rem;  /* 18 */
  --text-body:    1rem;      /* 16 */
  --text-body-sm: 0.875rem;  /* 14 */
  --text-caption: 0.8125rem; /* 13 */
  --text-overline:0.75rem;   /* 12 */

  --leading-tight:   1.05;
  --leading-heading: 1.18;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.7;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-overline:0.08em;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --measure: 68ch;      /* максимальная длина строки текста */
  --measure-narrow: 48ch;
}

/* -----------------------------------------------------------------------------
   6. ОТСТУПЫ / РАЗМЕРЫ — шаг 4px
   -------------------------------------------------------------------------- */

:root {
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Вертикальные ритмы секций */
  --section-y:       clamp(3rem, 1.5rem + 6.6vw, 6rem);   /* 48 → 96 */
  --section-y-tight: clamp(2rem, 1.1rem + 4vw, 3.5rem);   /* 32 → 56 */
}

/* -----------------------------------------------------------------------------
   7. СЕТКА И КОНТЕЙНЕРЫ
   -------------------------------------------------------------------------- */

:root {
  --bp-sm:  30rem;   /*  480 */
  --bp-md:  48rem;   /*  768 */
  --bp-lg:  64rem;   /* 1024 */
  --bp-xl:  80rem;   /* 1280 */
  --bp-2xl: 96rem;   /* 1536 */

  --container-max:  1280px;
  --container-wide: 1440px;
  --container-text: 760px;

  --gutter: var(--space-4);      /* < md  */
  --grid-gap: var(--space-4);
  --grid-columns: 4;
}

@media (min-width: 48rem) {
  :root { --gutter: var(--space-6); --grid-gap: var(--space-5); --grid-columns: 8; }
}

@media (min-width: 64rem) {
  :root { --gutter: var(--space-8); --grid-gap: var(--space-6); --grid-columns: 12; }
}

/* -----------------------------------------------------------------------------
   8. РАДИУСЫ, ГРАНИЦЫ, ТЕНИ
   -------------------------------------------------------------------------- */

:root {
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;  /* кнопки, поля ввода */
  --radius-lg:  14px;  /* карточки */
  --radius-xl:  20px;  /* крупные блоки, модальные окна */
  --radius-2xl: 28px;  /* hero-медиа */
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-strong: 2px;

  /* Тени тонированы в нейтраль-800 (#2B2A29), а не в чистый чёрный */
  --shadow-xs: 0 1px 2px rgba(43, 42, 41, 0.06);
  --shadow-sm: 0 1px 3px rgba(43, 42, 41, 0.08), 0 1px 2px rgba(43, 42, 41, 0.04);
  --shadow-md: 0 4px 10px rgba(43, 42, 41, 0.08), 0 2px 4px rgba(43, 42, 41, 0.04);
  --shadow-lg: 0 12px 24px rgba(43, 42, 41, 0.10), 0 4px 8px rgba(43, 42, 41, 0.05);
  --shadow-xl: 0 24px 48px rgba(43, 42, 41, 0.14), 0 8px 16px rgba(43, 42, 41, 0.06);
  --shadow-accent: 0 6px 18px rgba(255, 102, 0, 0.28);

  /* Кольцо фокуса: белый зазор + тёмно-оранжевый контур (5.26:1 на белом) */
  --ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring);
}

/* -----------------------------------------------------------------------------
   9. АНИМАЦИЯ
   -------------------------------------------------------------------------- */

:root {
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    320ms;
  --duration-slower:  480ms;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms;
    --duration-slow: 1ms;    --duration-slower: 1ms;
  }
}

/* -----------------------------------------------------------------------------
   10. Z-ИНДЕКСЫ
   -------------------------------------------------------------------------- */

:root {
  --z-base:      0;
  --z-sticky:    100;
  --z-header:    200;
  --z-dropdown:  300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;
  --z-tooltip:   700;
}

/* -----------------------------------------------------------------------------
   11. ЛОГОТИП
   -------------------------------------------------------------------------- */

:root {
  --logo-clear-space-ratio: 0.344; /* 2X, где X = высота «крыши» = 0.172 × высоты логотипа */
  --logo-height-header:     40px;
  --logo-height-header-sm:  32px;
  --logo-height-footer:     48px;
}