/* =========================================================================
   base style.css - Variables and Resets
   ========================================================================= */

:root {
  /* Colors - derived from the reference image */
  --bg-body: #ECEEF2; /* Light grey background */
  --bg-sidebar: #E3E5EB; /* Slightly darker grey for sidebar area */
  --bg-card: #FFFFFF;
  
  --text-main: #4A5568;
  --text-heading: #2D3748;
  --text-muted: #A0AEC0;
  
  --primary-orange: #FF6B35;
  --positive-green: #22C55E;
  --teal-accent: #00B4D8;
  --border-light: #E2E8F0;

  --sidebar-text: #718096;
  --sidebar-active-text: #FF6B35;
  
  /* Badges */
  --badge-buy-bg: #2dd4bf;
  --badge-buy-text: #FFFFFF;
  --badge-success-bg: #34d399;
  --badge-success-text: #FFFFFF;

  /* Layout */
  --sidebar-width: 260px;
  --topbar-height: 70px;
  
  /* Tyopgraphy */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-body);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* Utilities */
.text-positive { color: var(--positive-green); }
.text-orange { color: var(--primary-orange); }