/* ==========================================================================
   Воронка CRM — base design tokens, reset, shared UI primitives
   Fonts are self-hosted (css/fonts.css). No CDNs.
   ========================================================================== */

:root {
  /* --- Brand --------------------------------------------------------- */
  --forest:     #0e4d3a;   /* primary: headings on dark, CTA blocks */
  --forest-900: #0a3025;   /* sidebar */
  --brand:      #1f8a64;   /* interactive: links, focus, active */
  --brand-600:  #197454;
  --brand-050:  #e6f2ec;
  --brand-100:  #cfe6da;
  --saffron:    #f0b429;   /* rare highlight */
  --saffron-050:#fdf3db;

  /* --- Stage colors (kanban identity only) --------------------------- */
  --blue:   #3b7dd8;
  --violet: #8466d4;
  --amber:  #e0a21b;
  --teal:   #1f8a64;
  --green:  #0e4d3a;
  --slate:  #9aa59e;
  --red:    #d64545;

  /* --- Neutrals ------------------------------------------------------ */
  --ink:      #16201b;
  --ink-2:    #3e4a44;
  --muted:    #6b776f;
  --line:     #dce2dc;
  --line-2:   #e8ece7;
  --surface:  #ffffff;
  --surface-2:#f3f5f2;   /* paper */
  --surface-3:#e9ede8;

  /* --- Elevation ----------------------------------------------------- */
  --shadow-sm: 0 1px 0 rgba(22, 32, 27, .04), 0 1px 2px rgba(22, 32, 27, .06);
  --shadow-md: 0 6px 16px -4px rgba(14, 77, 58, .14), 0 2px 4px rgba(22, 32, 27, .05);
  --shadow-lg: 0 24px 48px -12px rgba(14, 77, 58, .22), 0 4px 10px rgba(22, 32, 27, .06);

  /* --- Radius -------------------------------------------------------- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-full: 999px;

  /* --- Type ---------------------------------------------------------- */
  --font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Unbounded", "Onest", -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.3, .1, .2, 1);
}

/* --- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  background: var(--surface-2);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--saffron); color: var(--ink); }

/* --- Typography scale ------------------------------------------------ */
h1, h2, h3, h4 { line-height: 1.12; font-weight: 700; }
h1, h2 { font-family: var(--font-display); letter-spacing: -.03em; }
h1 { font-size: clamp(2.2rem, 5.4vw, 4.1rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.45rem); font-weight: 600; }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }

/* --- Buttons --------------------------------------------------------- */
.btn {
  --_bg: var(--forest);
  --_fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .78em 1.3em;
  font-size: .95rem;
  font-weight: 600;
  color: var(--_fg);
  background: var(--_bg);
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { --_bg: var(--ink); }
.btn--lg { padding: 1em 1.6em; font-size: 1.02rem; }
.btn--accent { --_bg: var(--saffron); --_fg: var(--ink); }
.btn--accent:hover { --_bg: #f5c451; }
.btn--ghost { --_bg: transparent; --_fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { --_bg: var(--surface); border-color: var(--ink-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Pills / dots ---------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .22em .6em;
  font-size: .74rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-2);
  white-space: nowrap;
}
.dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: none; }

/* --- Utilities ------------------------------------------------------- */
.container { width: min(1200px, 100% - 2rem); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hide { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto; }
}