/* =========================================================
   ПневмоМолот — design tokens & reset
   Industrial forge theme: dark charcoal + molten amber accent
   ========================================================= */

:root {
  /* ---- Light theme ---- */
  --bg: 36 24% 95%;
  --surface: 34 20% 91%;
  --surface-2: 34 18% 87%;
  --border: 30 14% 78%;
  --text: 20 14% 12%;
  --text-muted: 22 8% 38%;
  --accent: 20 92% 45%;
  --accent-hover: 20 92% 38%;
  --accent-active: 20 92% 32%;
  --accent-text: 0 0% 100%;
  --success: 142 60% 32%;
  --danger: 6 70% 45%;
  --shadow-color: 20 30% 10%;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.5rem;
  --text-hero: clamp(2.4rem, 6vw, 4.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --container-max: 1240px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
}

.dark {
  --bg: 20 7% 7%;
  --surface: 20 7% 10%;
  --surface-2: 22 8% 13%;
  --border: 25 10% 19%;
  --text: 36 30% 94%;
  --text-muted: 30 8% 62%;
  --accent: 24 100% 55%;
  --accent-hover: 22 100% 62%;
  --accent-active: 20 100% 42%;
  --accent-text: 0 0% 8%;
  --success: 142 45% 45%;
  --danger: 6 80% 60%;
  --shadow-color: 0 0% 0%;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: hsl(var(--bg));
  color: hsl(var(--text));
  font-size: var(--text-base);
  line-height: 1.6;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}