/* ============================================================
   PartnerPlus CRM – Design System
   Single source of truth for all design tokens.
   Load this FIRST — all other CSS files depend on these vars.
   ============================================================ */

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

:root {
  /* Typography */
  --font: 'Inter', system-ui, sans-serif;

  /* Brand Colors */
  --vk-gold:       #c8a24a;
  --vk-gold-dark:  #b8943f;
  --vk-gold-light: #dab85e;

  /* Backgrounds — 3 elevation levels */
  --vk-bg:       #0f0f0f;   /* body */
  --vk-surface:  #141414;   /* sidebar, panels */
  --vk-elevated: #1a1a1a;   /* cards, inputs */

  /* Borders */
  --vk-border:      rgba(255,255,255,0.08);
  --vk-border-gold: rgba(200,162,74,0.25);

  /* Text */
  --vk-text:       #f0f0f0;
  --vk-text-dim:   #aaa;
  --vk-text-muted: #666;

  /* Radius */
  --radius:    12px;
  --radius-sm:  8px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow:      0 4px 20px rgba(0,0,0,0.4);
  --shadow-gold: 0 8px 24px rgba(200,162,74,0.3);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font);
  font-size: 15px;
  color: var(--vk-text);
  background: var(--vk-bg);
  -webkit-font-smoothing: antialiased;
}

h2 { font-size: 22px; font-weight: 800; letter-spacing: .3px; margin: 10px 0 16px; }
h3 { font-size: 17px; font-weight: 700; margin-top: 0; }

a { color: var(--vk-gold); }

/* Utility */
.text-gold  { color: var(--vk-gold); }
.text-muted { color: var(--vk-text-muted); }
.text-dim   { color: var(--vk-text-dim); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}