/* css/base.css */

/* Base Styles */
:root {
  /* Brand Colors */
  --primary-blue: #4152F4;
  --accent-orange: #EF5634;
  /* Light Mode Colors (Default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Spacing */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 3rem;    /* 48px */
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-medium: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}

/* Dark Mode Colors */
[data-theme="dark"] {
  --bg-primary: #1f2937;    /* Darker blue-gray */
  --bg-secondary: #111827;  /* Very dark blue-gray, almost black */
  --bg-tertiary: #0f172a;   /* Even darker, for subtle contrasts */
  --text-primary: #f9fafb;    /* Off-white */
  --text-secondary: #d1d5db;  /* Light gray */
  --text-tertiary: #9ca3af;   /* Medium gray */
  --border-primary: #374151;  /* Dark gray border */
  --border-secondary: #4b5563;/* Slightly lighter dark gray border */
}

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

/* HTML and Body element resets for full viewport usage */
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrollbars on the root */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased; /* Smoother fonts on Webkit */
  -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
}

body {
  height: 100%; 
  width: 100%;  
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  
  display: flex; /* Key for sidebar + content wrapper layout */
  
  transition: background-color var(--transition-medium), color var(--transition-medium);
  overflow: hidden; /* Body itself should not scroll; flex children manage their own */
}

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary); 
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }

a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--accent-orange); 
}

/* Button Base Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid transparent; 
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--primary-blue);
  color: white;
  border-color: var(--primary-blue);
}
.btn-primary:hover:not(:disabled) {
  background-color: #3b4df0; 
  border-color: #3b4df0;
  transform: translateY(-1px);
}

.btn-danger {
  background-color: #dc2626; 
  color: white;
  border-color: #dc2626;
}
.btn-danger:hover:not(:disabled) {
  background-color: #b91c1c; 
  border-color: #b91c1c;
  transform: translateY(-1px);
}

/* Input Base Styles */
.input { 
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  background-color: var(--bg-primary); 
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgb(65 82 244 / 0.1);
}
.input::placeholder {
  color: var(--text-tertiary);
  opacity: 1; 
}

/* Card Base Styles */
.card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-medium); 
}
.card:hover { 
    box-shadow: var(--shadow-md);
}

/* Utility Classes (examples) */
.text-center { text-align: center; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.w-full { width: 100%; }

/* Responsive base adjustments if any */
@media (max-width: 768px) {
  :root { 
    --font-size-3xl: 1.625rem; 
    --font-size-2xl: 1.375rem; 
  }
}