/* ==========================================================================
   MetroFood OS — Design Tokens
   Brand colors, radii, shadows. Change here to theme the entire app.
   ========================================================================== */

:root {
  --g: #1B5E35;
  --g2: #16502c;
  --g3: #0f3a1f;
  --gm: #2e7d4f;
  --gl: #d4edde;
  --gll: #f0f9f3;
  --gold: #C9A84C;
  --gold2: #a07c2a;
  --goldl: #fdf3dc;
  --cream: #faf8f4;
  --ink: #1a1a18;
  --ink2: #3d3d38;
  --muted: #787870;
  --border: #e4e0d8;
  --borderl: #f0ede8;
  --white: #ffffff;
  --red: #c0392b;
  --redl: #fdf0ef;
  --amber: #d68910;
  --amberl: #fef9e7;
  --blue: #1a6fa8;
  --bluel: #eaf4fb;
  --shadow: 0 1px 4px rgba(27,94,53,.07), 0 4px 16px rgba(27,94,53,.05);
  --shadow-lg: 0 4px 24px rgba(27,94,53,.12), 0 1px 4px rgba(27,94,53,.08);
  --radius: 10px;
  --radius-sm: 6px;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Responsive */
@media (max-width: 900px) {
  .sidebar { width: 56px; }
  .nav-item span, .sidebar-section, .sidebar-bottom { display: none; }
  .nav-icon { width: 100%; text-align: center; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .ocr-split { grid-template-columns: 1fr; }
}