/* ==========================================================================
   НЕЙРО АРТЕЛЬ — дизайн-токены v1.0
   Источник истины для цвета, типографики, отступов, радиусов, теней и движения.
   Логотип: пиксельно-геометрический знак «кольцо артели» (монохром).
   ========================================================================== */

/* ==========================================================================
   ШРИФТЫ (локальные, без внешних CDN)
   Manrope — вариативный 400–800 (заголовки), Inter — текст, JetBrains Mono — данные
   ========================================================================== */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/jetbrains-mono-700.woff2') format('woff2'); }

:root {
  /* ---------- 1. Нейтральная шкала (графит, холодная) ---------- */
  --n-0:    #FFFFFF;
  --n-25:   #FAFAFB;
  --n-50:   #F4F5F7;
  --n-100:  #E9EBEF;
  --n-200:  #D7DAE0;
  --n-300:  #B9BEC7;
  --n-400:  #949AA6;
  --n-500:  #6F7684;
  --n-600:  #565C69;
  --n-700:  #3F444F;
  --n-800:  #2A2E37;
  --n-900:  #1A1D24;
  --n-950:  #101216;
  --n-1000: #0A0B0E;

  /* ---------- 2. Бренд: латунь (мастерство, ремесло) ---------- */
  --brand-50:  #FDF6EC;
  --brand-100: #F8E7CE;
  --brand-200: #EFD3A6;
  --brand-300: #E3B879;
  --brand-400: #D69E56;
  --brand-500: #C8873C;
  --brand-600: #A96E2C;
  --brand-700: #85541F;
  --brand-800: #633E15;

  /* ---------- 3. Сталь (данные, ссылки, вторичный акцент) ---------- */
  --steel-100: #E4F0F4;
  --steel-300: #8FC3D4;
  --steel-500: #3F8FA8;
  --steel-600: #2F7189;
  --steel-700: #245A6E;

  /* ---------- 4. Семантика ---------- */
  --success-100: #E6F4EC;
  --success-500: #3E9A6B;
  --success-700: #2A6E4B;

  --warn-100: #FBF0DC;
  --warn-500: #D9A03A;
  --warn-700: #8A6216;

  --danger-100: #FBEDEC;
  --danger-500: #C25450;
  --danger-700: #8E3733;

  /* Семантические поверхности и текст (светлая тема) */
  --success-surface: var(--success-100);
  --success-text:    var(--success-700);
  --warn-surface:    var(--warn-100);
  --warn-text:       var(--warn-700);
  --danger-surface:  var(--danger-100);
  --danger-text:     var(--danger-700);
  --info-surface:    var(--steel-100);
  --info-text:       var(--steel-700);

  /* ---------- 5. Уровни мастера (лестница артели) ---------- */
  --level-apprentice:   #949AA6;
  --level-practitioner: #3F8FA8;
  --level-mentor:       #C8873C;
  --level-senior:       #A96E2C;
  --level-lead:         #6E56CF;

  /* ---------- 6. Семантические роли (светлая тема по умолчанию) ---------- */
  --bg:            var(--n-0);
  --bg-subtle:     var(--n-50);
  --surface:       var(--n-0);
  --surface-2:     var(--n-25);
  --surface-inset: var(--n-50);
  --border:        var(--n-200);
  --border-strong: var(--n-300);

  --text:      var(--n-950);   /* 18.0:1 на --bg  */
  --text-2:    var(--n-700);   /*  9.7:1          */
  --muted:     var(--n-500);   /*  4.6:1 (минимум для мелкого) */
  --text-invert: var(--n-0);

  --brand:        var(--brand-500);
  --brand-text:   var(--brand-700); /* 5.2:1 — только для текста */
  --brand-surface: var(--brand-50);
  --on-brand:     var(--n-950);     /* текст на латунной заливке: 6.4:1 */

  --link:       var(--steel-600);
  --link-hover: var(--steel-700);

  --focus-ring: var(--steel-600);
  --overlay: rgba(10, 11, 14, 0.55);

  /* ---------- 7. Типографика ---------- */
  --font-head: 'Manrope', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fs-display: clamp(2rem, 1.2rem + 3.2vw, 3rem);      /* 32 → 48 */
  --fs-h1:      clamp(1.75rem, 1.1rem + 2.4vw, 2.5rem); /* 28 → 40 */
  --fs-h2:      clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem); /* 22 → 30 */
  --fs-h3:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem);    /* 18 → 22 */
  --fs-h4:      1.125rem;  /* 18 */
  --fs-body-lg: 1.0625rem; /* 17 */
  --fs-body:    1rem;      /* 16 */
  --fs-sm:      0.875rem;  /* 14 */
  --fs-caption: 0.8125rem; /* 13 */
  --fs-micro:   0.75rem;   /* 12 — только не-смысловые подписи */

  --lh-tight: 1.12;
  --lh-head:  1.22;
  --lh-snug:  1.4;
  --lh-body:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---------- 8. Отступы (база 4px) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --gutter: 40px;          /* 32px на планшете, 20px на мобильном */
  --container: 1200px;
  --measure: 68ch;         /* ширина строки для чтения */

  /* ---------- 9. Радиусы (наследуют скругление блоков логотипа) ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ---------- 10. Границы и тени ---------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --shadow-1: 0 1px 2px rgba(16, 18, 22, 0.06);
  --shadow-2: 0 4px 12px rgba(16, 18, 22, 0.08);
  --shadow-3: 0 12px 32px rgba(16, 18, 22, 0.14);

  /* ---------- 11. Движение ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- 12. Слои ---------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ==========================================================================
   ТЁМНАЯ ТЕМА — повышение поверхности вместо теней
   ========================================================================== */
[data-theme='dark'] {
  --bg:            #0F1115;
  --bg-subtle:     #151821;
  --surface:       #171A21;
  --surface-2:     #1D212A;
  --surface-inset: #12151B;
  --border:        #262A33;
  --border-strong: #333844;

  --text:   #EDEFF3;  /* 15.6:1 на --bg */
  --text-2: #C2C7D0;  /* 11.2:1 */
  --muted:  #9AA1AD;  /*  7.1:1 */
  --text-invert: #0F1115;

  --brand:        #E0A75C;
  --brand-text:   #E9B978;
  --brand-surface: #241C11;
  --on-brand:     #14100A;

  --link:       #6FB6CC;
  --link-hover: #8FC3D4;
  --focus-ring: #6FB6CC;

  --success-100: #12271C;
  --warn-100:    #2A2113;
  --danger-100:  #2B1918;
  --steel-100:   #12232A;

  --success-surface: var(--success-100);
  --success-text:    #7FD1A6;
  --warn-surface:    var(--warn-100);
  --warn-text:       #E3B879;
  --danger-surface:  var(--danger-100);
  --danger-text:     #E79C98;
  --info-surface:    var(--steel-100);
  --info-text:       #8FC3D4;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);

  --overlay: rgba(0, 0, 0, 0.65);
}

@media (max-width: 1080px) {
  :root { --gutter: 32px; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; }
}

/* ==========================================================================
   БАЗОВЫЕ ПРАВИЛА
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

img, svg, video { max-width: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-head);
  margin: 0 0 var(--sp-3);
  color: var(--text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }
small, .t-caption { font-size: var(--fs-caption); color: var(--muted); }
code, .t-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Контейнер */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}