/* variables.css */
:root {
  /* Colors */
  --primary-color: #0F172A; /* Slate 900 for dark texts/buttons */
  --primary-hover: #1E293B;
  --secondary-color: #10B981; /* Emerald */
  --promo-bg: #D1FAE5; /* Light green for topbar */
  --promo-text: #065F46; /* Dark green for topbar text */
  --background-color: #FAFAFA; /* Very light gray/white background */
  --surface-color: #FFFFFF;
  --text-main: #111827; /* Gray 900 */
  --text-muted: #6B7280; /* Gray 500 */
  --border-color: #E5E7EB; /* Gray 200 */
  --error-color: #EF4444; /* Red 500 */

  /* Typography */
  --font-family-main: 'Inter', 'Outfit', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;

  /* Borders & Shadows */
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  
  /* Layout */
  --sidebar-width: 250px;
  --sidebar-submenu-width: 250px;
  --topbar-height: 40px;
}