/* KOLHOZDROP design tokens — shared by the site (app.css) and the admin panel (admin.css).
   Original brand: night over a wheat field. Warm wheat-gold accent, tractor green for wins. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #0b0d11;
  --bg-2: #10131a;
  --surface: #161a23;
  --surface-2: #1d222d;
  --surface-3: #252b38;
  --line: #2a3140;
  --line-soft: rgba(255, 255, 255, 0.06);

  /* text */
  --text: #f4efe4;
  --text-2: #c9c3b6;
  --muted: #8b92a0;
  --faint: #5d6474;

  /* brand */
  --gold: #f5b90a;
  --gold-2: #ffd75e;
  --gold-3: #b9860b;
  --gold-glow: rgba(245, 185, 10, 0.35);
  --gold-grad: linear-gradient(135deg, #ffe08a 0%, #f5b90a 45%, #c98a06 100%);
  --green: #4fd36a;
  --green-glow: rgba(79, 211, 106, 0.3);
  --red: #ff4d5e;
  --red-glow: rgba(255, 77, 94, 0.3);
  --sky: #5aa9ff;

  /* CS2 rarity colours (game data) */
  --r-consumer: #b0c3d9;
  --r-industrial: #5e98d9;
  --r-milspec: #4b69ff;
  --r-restricted: #8847ff;
  --r-classified: #d32ce6;
  --r-covert: #eb4b4b;
  --r-gold: #e4ae39;

  /* type */
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 34px;

  /* shape */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t: 240ms;

  /* layout */
  --page-max: 1320px;
  --gutter: 16px;
  --header-h: 68px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* Rarity helpers: set --rc on an element, then use var(--rc) */
.r-consumer { --rc: var(--r-consumer); }
.r-industrial { --rc: var(--r-industrial); }
.r-milspec { --rc: var(--r-milspec); }
.r-restricted { --rc: var(--r-restricted); }
.r-classified { --rc: var(--r-classified); }
.r-covert { --rc: var(--r-covert); }
.r-gold { --rc: var(--r-gold); }

/* Money: <span class="kd-money"><img src="/img/coin.svg" alt="">1 234</span> */
.kd-money {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kd-money img { width: 1.15em; height: 1.15em; flex: none; }

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