/* ============================================================
   kodzavod.ru — design tokens
   Industrial / engineering aesthetic. Black + white + signal red.
   ============================================================ */

:root {
  /* Brand */
  --kz-red: #E50C18;
  --kz-red-600: #C70811;
  --kz-red-100: #FDEBEC;

  /* Neutrals (warm-cool balanced, slight cool tilt) */
  --kz-ink: #050505;          /* near-black, headings */
  --kz-ink-2: #16171A;
  --kz-graphite: #2A2C31;
  --kz-steel-700: #494C53;
  --kz-steel-500: #7C8089;
  --kz-steel-300: #B6BAC1;
  --kz-steel-200: #D4D7DC;
  --kz-steel-100: #E8EAED;
  --kz-steel-50:  #F2F3F5;
  --kz-paper:     #F8F8F7;     /* page bg, slight warmth */
  --kz-white:     #FFFFFF;

  /* Surfaces (light theme) */
  --bg:          #F7F5F0;
  --bg-elev:     var(--kz-white);
  --bg-sunken:   #EEEAE0;
  --line:        #E1DCD0;
  --line-strong: #CBC4B3;
  --fg:          #211E1A;
  --fg-muted:    #57514A;
  --fg-subtle:   #6C655A;
  --accent:      #0D1117;
  --accent-fg:   #FFFFFF;

  /* Semantic */
  --ok:    #00784E;
  --warn:  #C97A0E;
  --err:   #E50C18;
  --info:  #2A6FDB;

  /* Type */
  --font-sans: 'Manrope', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (display = tight tracking, heavy) */
  --t-display-1: 88px;
  --t-display-2: 64px;
  --t-h1: 48px;
  --t-h2: 36px;
  --t-h3: 26px;
  --t-h4: 20px;
  --t-body: 16px;
  --t-small: 14px;
  --t-caption: 12px;
  --t-mono-label: 12px;

  /* Radii — restrained; industrial, not soft */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-2xl: 22px;

  /* Spacing (4px base) */
  --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;

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(10,10,11,0.04), 0 1px 2px rgba(10,10,11,0.06);
  --shadow-2: 0 1px 0 rgba(10,10,11,0.04), 0 4px 16px rgba(10,10,11,0.08);
  --shadow-3: 0 12px 40px rgba(10,10,11,0.12);
  --shadow-red: 0 8px 28px rgba(225,26,26,0.28);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.5,1.6,.4,1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 360ms;
  /* Motion — живой чат (KOD-2195): появление, уход, раскрытие, проявление слов. */
  --ease-enter: cubic-bezier(.16,1,.3,1);
  --ease-exit: cubic-bezier(.4,0,1,1);
  --ease-expand: cubic-bezier(.2,.8,.2,1);
  --dur-enter: 420ms;
  --dur-exit: 280ms;
  --dur-expand: 440ms;
  --dur-word: 400ms;
}

[data-theme="dark"] {
  --bg:          #0C0D0F;
  --bg-elev:     #17181B;
  --bg-sunken:   #09090B;
  --line:        #292B30;
  --line-strong: #3A3D44;
  --fg:          #E6E7EA;
  --fg-muted:    #ABAFB6;
  --fg-subtle:   #82868E;
  --accent:      #FF2A2A;
  --accent-fg:   #FFFFFF;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 1px 0 rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.5);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.6);
}

/* ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}

/* Type primitives ----- */
.kz-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'zero', 'ss01';
}
.kz-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 500;
}
.kz-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.kz-h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
.kz-h2 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
.kz-h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.kz-h4 { font-size: var(--t-h4); font-weight: 600; line-height: 1.3; margin: 0; }
.kz-body { font-size: var(--t-body); }
.kz-small { font-size: var(--t-small); color: var(--fg-muted); }

/* Selection */
::selection { background: var(--kz-red); color: #fff; }

/* Buttons -------- */
.kz-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  height: 40px; padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.kz-btn:active { transform: translateY(1px); }
.kz-btn--primary {
  background: var(--kz-ink);
  color: #fff;
}
.kz-btn--primary:hover { background: #000; box-shadow: var(--shadow-2); }
[data-theme="dark"] .kz-btn--primary { background: #fff; color: #000; }
[data-theme="dark"] .kz-btn--primary:hover { background: #f2f3f5; }

.kz-btn--accent {
  background: var(--kz-red);
  color: #fff;
  box-shadow: var(--shadow-red);
}
.kz-btn--accent:hover { background: var(--kz-red-600); }

.kz-btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.kz-btn--ghost:hover { background: var(--bg-sunken); border-color: var(--fg); }

.kz-btn--quiet {
  background: transparent; color: var(--fg-muted);
}
.kz-btn--quiet:hover { color: var(--fg); background: var(--bg-sunken); }

.kz-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.kz-btn--lg { height: 52px; padding: 0 24px; font-size: 16px; border-radius: var(--r-md); }

/* Inputs ---------- */
.kz-input {
  font-family: var(--font-sans);
  font-size: 14px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--fg);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.kz-input:focus {
  border-color: var(--kz-ink);
  box-shadow: 0 0 0 3px rgba(10,10,11,0.06);
}
[data-theme="dark"] .kz-input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }
.kz-input::placeholder { color: var(--fg-subtle); }

/* Cards ------------ */
.kz-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.kz-card--bordered {
  border: 1px solid var(--line-strong);
  box-shadow: none;
}

/* Badges ---------- */
.kz-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kz-badge--ink   { background: var(--kz-ink); color: #fff; }
.kz-badge--red   { background: var(--kz-red); color: #fff; }
.kz-badge--soft  { background: var(--bg-sunken); color: var(--fg-muted); border: 1px solid var(--line); }
.kz-badge--ok    { background: rgba(31,138,91,0.12); color: var(--ok); }
.kz-badge--warn  { background: rgba(201,122,14,0.12); color: var(--warn); }

/* Code blocks ----- */
.kz-code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  background: var(--kz-ink);
  color: #E8EAED;
  border-radius: var(--r-md);
  padding: 16px 18px;
  overflow: auto;
}
.kz-code .tok-key  { color: #FF6E6E; }
.kz-code .tok-str  { color: #C9E68B; }
.kz-code .tok-num  { color: #FFB454; }
.kz-code .tok-com  { color: #6E727A; }
.kz-code .tok-fn   { color: #8DD0FF; }
.kz-code .tok-var  { color: #E8EAED; }

/* Bracket motif --- */
.kz-bracket-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Diagonal beam pattern */
.kz-stripe {
  background-image: repeating-linear-gradient(
    -55deg,
    transparent 0 14px,
    var(--kz-red) 14px 16px
  );
}
.kz-stripe-soft {
  background-image: repeating-linear-gradient(
    -55deg,
    transparent 0 18px,
    rgba(225,26,26,0.18) 18px 20px
  );
}

/* Conveyor strip ---- */
.kz-tape {
  background: var(--kz-ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
}