:root {
  --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* Dark Theme Palette - Primary Colors */
  --color-primary: #10b981;      /* Emerald 500 */
  --color-primary-dark: #059669; /* Emerald 600 */
  --color-primary-light: #34d399; /* Emerald 400 */
  
  /* Secondary/Accent Colors */
  --color-secondary: #8b5cf6;    /* Violet 500 */
  --color-accent: #f59e0b;       /* Amber 500 */
  --color-warning: #ef4444;      /* Red 500 */
  --color-info: #3b82f6;         /* Blue 500 */
  
  /* Neutral Colors - Backgrounds */
  --bg-primary: #09090b;         /* Zinc 950 - Main background */
  --bg-secondary: #18181b;       /* Zinc 900 - Cards/panels */
  --bg-tertiary: #27272a;        /* Zinc 800 - Borders/dividers */
  --bg-hover: #3f3f46;           /* Zinc 700 - Hover states */
  --bg-active: rgba(16, 185, 129, 0.15); /* Primary light hover */
  
  /* Text Colors */
  --text-primary: #fafafa;       /* Zinc 50 - Main text */
  --text-secondary: #a1a1aa;     /* Zinc 400 - Secondary text */
  --text-muted: #71717a;         /* Zinc 500 - Muted text */
  --text-disabled: #52525b;      /* Zinc 600 - Disabled states */
  
  /* Border Colors */
  --border-default: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.2);
  --border-primary: rgba(16, 185, 129, 0.3);
  
  /* Elevation & Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3);
  
  /* Status Colors */
  --status-success: #10b981;     /* Emerald */
  --status-warning: #f59e0b;     /* Amber */
  --status-error: #ef4444;       /* Red */
  --status-info: #3b82f6;        /* Blue */
  
  /* Typography Scale */
  --text-xs: 0.75rem;            /* 12px */
  --text-sm: 0.875rem;           /* 14px */
  --text-base: 1rem;             /* 16px */
  --text-lg: 1.125rem;           /* 18px */
  --text-xl: 1.25rem;            /* 20px */
  --text-2xl: 1.5rem;            /* 24px */
  --text-3xl: 1.875rem;          /* 30px */
  
  /* Spacing Scale */
  --spacing-1: 0.25rem;          /* 4px */
  --spacing-2: 0.5rem;           /* 8px */
  --spacing-3: 0.75rem;          /* 12px */
  --spacing-4: 1rem;             /* 16px */
  --spacing-5: 1.25rem;          /* 20px */
  --spacing-6: 1.5rem;           /* 24px */
  --spacing-8: 2rem;             /* 32px */
  --spacing-10: 2.5rem;          /* 40px */
  
  /* Radius Scale */
  --radius-sm: 6px;              /* Small radius */
  --radius-md: 12px;             /* Medium radius */
  --radius-lg: 16px;             /* Large radius */
  --radius-full: 9999px;         /* Fully rounded */
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body {
  min-height: 100vh;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

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

input, select, textarea {
  font-family: inherit;
}

/* Utility classes */
.pt-4 { padding-top: var(--spacing-4); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-4 { padding-bottom: var(--spacing-4); }