/* ============================================================
   Озимая.РФ — Design Tokens
   Технологичный агро. Палитра Щёлково/Бетарен + командные тёмные surface.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:wght@400;500;600;700&display=swap');

:root {
  /* === ПАЛИТРА: betaren / Щёлково + командный тёмный === */
  --teal-900: #032A2C;          /* command surface */
  --teal-800: #053f42;
  --teal-700: #007078;          /* primary brand */
  --teal-600: #01998C;
  --teal-500: #00BCAB;          /* accent / data positive */
  --teal-300: #6AD9CC;
  --teal-100: #AFE2E3;
  --teal-50:  #E7F4F4;
  --teal-25:  #F2FAFA;

  --cta:      #E8004C;          /* CTA / hot status */
  --cta-dark: #B8003D;
  --cta-soft: #FCE5ED;

  --gold:     #E8B33D;
  --gold-soft:#FFF3D1;

  --ink-900: #0B0F12;
  --ink-800: #1A1A1A;
  --ink-700: #2B3033;
  --ink-500: #4A4A4A;
  --ink-400: #6E6E6E;
  --ink-300: #9AA1A4;
  --ink-200: #C9CECF;
  --ink-100: #E4E7E8;
  --ink-50:  #F1F3F4;

  --bg:        #FFFFFF;
  --bg-soft:   #F8FAFA;          /* page background */
  --bg-warm:   #FAF7F1;          /* document parchment */
  --bg-grid:   #F4F7F7;
  --line:      #E0E3E4;
  --line-soft: #ECEFF0;

  --green:     #1B7A4F;          /* status ok */
  --green-soft:#E2F2EB;
  --amber:     #C77A00;          /* status warning */
  --amber-soft:#FCEFD7;
  --red:       #B8003D;          /* status danger */
  --red-soft:  #FCE5ED;

  /* === Типографика === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', Menlo, monospace;
  --font-serif: 'IBM Plex Serif', 'Source Serif Pro', Georgia, serif;

  /* === Размерность === */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-xs: 0 1px 2px rgba(3, 42, 44, 0.06);
  --shadow-sm: 0 2px 6px rgba(3, 42, 44, 0.06), 0 1px 2px rgba(3, 42, 44, 0.04);
  --shadow-md: 0 8px 24px -6px rgba(3, 42, 44, 0.10), 0 2px 6px rgba(3, 42, 44, 0.06);
  --shadow-lg: 0 20px 48px -12px rgba(3, 42, 44, 0.18);
  --shadow-teal: 0 8px 28px -10px rgba(0, 112, 120, 0.45);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
*::selection { background: var(--teal-700); color: #fff; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-800);
  background: var(--bg-soft);
  font-feature-settings: 'ss01', 'cv11', 'tnum';
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
hr { border: none; border-top: 1px solid var(--line); }

/* === Утилитарные классы === */
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; }
.serif { font-family: var(--font-serif); }
.tabular { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-700);
  font-weight: 500;
}
.eyebrow--ink { color: var(--ink-400); }
.eyebrow--white { color: var(--teal-300); }

/* === Status pills === */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 3px 8px; border-radius: 999px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill--ok    { background: var(--green-soft); color: var(--green); }
.pill--warn  { background: var(--amber-soft); color: var(--amber); }
.pill--hot   { background: var(--cta-soft);   color: var(--cta-dark); }
.pill--info  { background: var(--teal-50);    color: var(--teal-700); }
.pill--idle  { background: var(--ink-50);     color: var(--ink-500); }
.pill--dark  { background: rgba(255,255,255,0.08); color: var(--teal-300); border-color: rgba(255,255,255,0.12); }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 13px;
  padding: 9px 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer; white-space: nowrap;
}
.btn--primary { background: var(--teal-700); color: #fff; }
.btn--primary:hover { background: var(--teal-800); box-shadow: var(--shadow-teal); }
.btn--cta { background: var(--cta); color: #fff; }
.btn--cta:hover { background: var(--cta-dark); }
.btn--ghost { color: var(--ink-700); border-color: var(--line); background: #fff; }
.btn--ghost:hover { border-color: var(--teal-700); color: var(--teal-700); }
.btn--dark { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.12); }
.btn--dark:hover { background: rgba(255,255,255,0.14); border-color: var(--teal-500); }
.btn--sm { padding: 6px 10px; font-size: 12px; }

/* === Cards === */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.card--inset { background: var(--bg-soft); }