/* Theme.css - Design Tokens and Color Scheme */

:root {
  /* Primary Colors */
  --primary: #27667b;
  --primary-hover: #1e4f5f;
  --primary-focus: rgba(39, 102, 123, 0.125);
  --primary-inverse: #fff;
  
  /* Accent Colors */
  --accent: #db6923;
  --accent-hover: #b85a1e;
  --accent-focus: rgba(219, 105, 35, 0.125);
  
  /* Neutral Colors */
  --neutral: #726756;
  --neutral-light: #f8f7f5;
  
  /* Semantic Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  
  /* Text Colors */
  --text-primary: #374151;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: var(--neutral-light);
  --bg-overlay: rgba(0, 0, 0, 0.1);
  
  /* Border Colors */
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  
  /* Shadow Colors */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 15px rgba(39, 102, 123, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
  
  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1.25rem;
  --space-xl: 1.75rem;
  --space-2xl: 2rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  
  /* Typography Scale */
  --font-family: "Poppins", 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;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  
  /* Line Heights */
  --line-height-tight: 1.10;
  --line-height-normal: 1.25;
  --line-height-relaxed: 1.5;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* Global Typography */
body {
  font-family: var(--font-family);
  color: var(--text-primary);
  line-height: var(--line-height-normal);
}

/* Utility Classes for Colors */
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }
.text-muted { color: var(--text-muted); }

.bg-primary { background-color: var(--primary); }
.bg-accent { background-color: var(--accent); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error { background-color: var(--error); }
.bg-info { background-color: var(--info); }
.bg-light { background-color: var(--bg-secondary); }