/* LOS Agency — Design System 2.0 */

/* СВЕТЛАЯ ТЕМА (по умолчанию) */
:root {
  --bg: #F7F5F2;
  --surface: #FFFFFF;
  --surface2: #F0EDE8;
  --border: #E5E0D8;
  --text: #1A1917;
  --muted: #9B9189;
  --accent: #8B6F47;
  --accent-dim: rgba(139,111,71,0.09);
  --red: #B85450;
  --green: #4E8A5A;
  --blue: #4A6E8A;
  --yellow: #A8892E;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

/* ТЁМНАЯ ТЕМА */
body.dark {
  --bg: #111111;
  --surface: #1A1A1A;
  --surface2: #202020;
  --border: #2C2C2C;
  --text: #E2DDD6;
  --muted: #776E63;
  --accent: #E8D9C0;
  --accent-dim: rgba(232,217,192,0.08);
  --red: #C0614A;
  --green: #5E8F67;
  --blue: #5A7D96;
  --yellow: #C9A84C;
}

/* БАЗОВЫЕ КОМПОНЕНТЫ */
body { background: var(--bg); color: var(--text); font-family: var(--font); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 15px; }

.btn { border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; transition: all 0.15s; font-family: var(--font); }
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.btn-accent { border: 1px solid var(--accent); color: var(--accent); background: var(--accent-dim); border-radius: 6px; cursor: pointer; transition: all 0.15s; font-family: var(--font); }
.btn-accent:hover { background: var(--accent); color: var(--surface); }

.badge { background: var(--accent-dim); border: 1px solid var(--border); color: var(--accent); border-radius: 4px; padding: 2px 8px; font-size: 11px; }

.input { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); outline: none; font-family: var(--font); transition: border-color 0.15s; }
.input:focus { border-color: var(--accent); }

.tag { border: 1px solid var(--border); color: var(--muted); font-size: 10px; border-radius: 4px; padding: 1px 6px; }
.tag-red { border-color: var(--red); color: var(--red); }
.tag-green { border-color: var(--green); color: var(--green); }
.tag-blue { border-color: var(--blue); color: var(--blue); }
.tag-yellow { border-color: var(--yellow); color: var(--yellow); }

.metric { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }

select option { background: var(--bg); color: var(--text); }

.muted { color: var(--muted); }
.accent { color: var(--accent); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-blue { color: var(--blue); }
.text-yellow { color: var(--yellow); }