/*
 * themes.css - CANONICAL TOKEN SOURCE
 * ====================================
 * This is the single source of truth for all design tokens.
 * All other CSS files should reference these tokens via var().
 *
 * Token categories:
 * - Color palette: --color-{hue}-{shade} (blue, green, red, yellow, gray)
 * - Semantic colors: --primary, --success, --warning, --danger, --info
 * - Text colors: --text, --text-light, --text-muted, --text-inverse
 * - Background colors: --bg-body, --bg-card, --bg-hover, --bg-active
 * - Border colors: --border, --border-light, --border-dark
 * - Shadows: --shadow, --shadow-dark
 * - Typography scale: --text-xs through --text-4xl
 * - Spacing: --spacing-1 through --spacing-6
 * - Radius: --border-radius-sm, --border-radius, --border-radius-lg, -xl, -2xl, -pill
 * - Focus: --focus-ring
 *
 * Includes dark mode (.dark-theme class) with all tokens overridden.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}

:root {
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;

  /* Typography scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Base colors palette */
  --color-blue-50: #eaf2ff;
  --color-blue-100: #c8dbff;
  --color-blue-200: #a6c4ff;
  --color-blue-300: #84adff;
  --color-blue-400: #6291ff;
  --color-blue-500: #0d6efd;
  --color-blue-600: #0b5ed7;
  --color-blue-700: #094fb3;
  --color-blue-800: #083f8f;
  --color-blue-900: #062f6b;
  
  --color-green-50: #ecfdf5;
  --color-green-100: #d1fae5;
  --color-green-200: #a7f3d0;
  --color-green-300: #6ee7b7;
  --color-green-400: #34d399;
  --color-green-500: #10b981;
  --color-green-600: #059669;
  --color-green-700: #047857;
  --color-green-800: #065f46;
  --color-green-900: #064e3b;
  
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc3545;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  
  --color-yellow-50: #fffbeb;
  --color-yellow-100: #fef3c7;
  --color-yellow-200: #fde68a;
  --color-yellow-300: #fcd34d;
  --color-yellow-400: #fbbf24;
  --color-yellow-500: #f59e0b;
  --color-yellow-600: #ffc107;
  --color-yellow-700: #b45309;
  --color-yellow-800: #92400e;
  --color-yellow-900: #78350f;
  
  --color-gray-50: #f8f9fa;
  --color-gray-100: #e9ecef;
  --color-gray-200: #dee2e6;
  --color-gray-300: #ced4da;
  --color-gray-400: #adb5bd;
  --color-gray-500: #6c757d;
  --color-gray-600: #495057;
  --color-gray-700: #343a40;
  --color-gray-800: #212529;
  --color-gray-900: #1a1a1a;

  --color-warm-50: #faf8f5;
  --color-warm-100: #f0ece6;
  --color-warm-200: #e3ddd6;
  --color-warm-300: #ddd7ce;
  --color-warm-400: #c9c1b6;
  --color-warm-500: #8a8380;
  --color-warm-600: #6f6765;
  --color-warm-700: #5a4128;
  --color-warm-800: #2d2824;
  --color-warm-900: #201515;

  /* Light theme (default) */
  --primary: #7c5e3c;
  --primary-hover: #6b4f31;
  --primary-active: #5a4128;
  --primary-light: #f5efe7;
  --primary-dark: #5a4128;
  
  --secondary: var(--color-gray-500);
  --secondary-hover: var(--color-gray-600);
  --secondary-active: var(--color-gray-700);
  
  --success: #16a34a;
  --success-hover: #15803d;
  --success-active: #166534;
  --success-light: #eafbf1;
  --success-bg: #eafbf1;
  
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --danger-active: #991b1b;
  --danger-light: #feecee;
  --danger-bg: #feecee;
  
  --warning: #d97706;
  --warning-hover: #b45309;
  --warning-active: #92400e;
  --warning-light: #fff4e5;
  --warning-bg: #fff4e5;
  
  --info: #0284c7;
  --info-hover: #0369a1;
  --info-active: #075985;
  --info-light: #e6f4ff;
  --info-bg: #e6f4ff;

  --cta: #f97316;
  --cta-hover: #ea580c;
  --cta-active: #c2410c;
  
  --text: #2d2824;
  --text-light: #8a8380;
  --text-muted: #6f6765;
  --text-subtle: #8a8380;
  --text-inverse: #faf8f5;

  --bg-body: #faf8f5;
  --bg-card: #ffffff;
  --bg-subtle: #f0ece6;
  --bg-hover: #ede9e3;
  --bg-active: #e3ddd6;

  --border: #ddd7ce;
  --border-strong: #c9c1b6;
  --border-light: #e8e2da;
  --border-dark: #c9c1b6;

  --shadow: rgba(45, 40, 36, 0.1);
  --shadow-dark: rgba(45, 40, 36, 0.2);

  /* Shadow scale (canonical - use these in components) */
  --shadow-sm: 0 1px 2px rgba(45, 40, 36, 0.05);
  --shadow-md: 0 2px 4px var(--shadow);
  --shadow-lg: 0 4px 6px var(--shadow);
  --shadow-xl: 0 10px 15px -3px var(--shadow);

  /* Link colors (decoupled from --primary to preserve blue links) */
  --link: #2b6cb0;
  --link-hover: #255e9a;

  /* Font stacks */
  --font-sans-product: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  /* Functional variables */
  --focus-ring: 0 0 0 0.25rem rgba(124, 94, 60, 0.35);
  --transition-speed: 0.15s;
  --border-radius: 0.25rem;
  --border-radius-sm: 0.125rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 1.5rem;
  --border-radius-pill: 999px;
  
  /* Spacing scale: 4px base unit */
  /* --spacing-1: 4px  | --spacing-2: 8px  | --spacing-3: 16px */
  /* --spacing-4: 24px | --spacing-5: 32px | --spacing-6: 48px */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 1rem;
  --spacing-4: 1.5rem;
  --spacing-5: 2rem;
  --spacing-6: 3rem;

  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-toast: 1060;
  --z-overlay: 1070;
  --z-tooltip: 1080;
}

/* Dark theme - Improved for better readability */
.dark-theme {
  /* Improved primary colors for better visibility */
  --primary: #4d94ff; /* Brighter blue */
  --primary-hover: #66a3ff;
  --primary-active: #80b3ff;
  --primary-light: rgba(77, 148, 255, 0.2);
  --primary-dark: #0055cc;
  
  /* Improved secondary colors */
  --secondary: #a1a8ae;
  --secondary-hover: #b8bdc2;
  --secondary-active: #d0d3d6;
  
  /* Brighter success colors */
  --success: #40c057;
  --success-hover: #51ca66;
  --success-active: #63d475;
  --success-light: rgba(64, 192, 87, 0.2);
  
  /* Brighter danger colors */
  --danger: #ff6b6b;
  --danger-hover: #ff8585;
  --danger-active: #ff9e9e;
  --danger-light: rgba(255, 107, 107, 0.2);
  
  /* Brighter warning colors */
  --warning: #fcc419;
  --warning-hover: #ffcf33;
  --warning-active: #ffda4d;
  --warning-light: rgba(252, 196, 25, 0.2);
  --warning-bg: rgba(252, 196, 25, 0.2);
  
  /* Brighter info colors */
  --info: #4dabf7;
  --info-hover: #66b8f8;
  --info-active: #80c5f9;
  --info-light: rgba(77, 171, 247, 0.2);
  --info-bg: rgba(77, 171, 247, 0.2);

  --cta: #f97316;
  --cta-hover: #ea580c;
  --cta-active: #c2410c;
  
  /* Improved text colors for better contrast */
  --text: #e9ecef;
  --text-light: #ced4da;
  --text-muted: #adb5bd;
  --text-subtle: #adb5bd;
  --text-inverse: #212529;
  
  /* Softer background colors */
  --bg-body: #2b3035; /* Softer than pure black */
  --bg-card: #343a40; /* Slightly lighter than body */
  --bg-subtle: #3e444a;
  --bg-hover: #3e444a; /* Slightly lighter for hover states */
  --bg-active: #495057; /* Even lighter for active states */
  
  /* Improved border colors */
  --border: #495057;
  --border-light: #3e444a;
  --border-dark: #6c757d;
  --border-strong: #6c757d;
  
  /* Enhanced shadows for depth */
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-dark: rgba(0, 0, 0, 0.5);
  
  /* Improved focus ring */
  --focus-ring: 0 0 0 0.25rem rgba(77, 148, 255, 0.5);

  /* Dark mode links follow dark-mode primary */
  --link: var(--primary);
  --link-hover: var(--primary-hover);

  --success-bg: rgba(64, 192, 87, 0.2);
  --danger-bg: rgba(255, 107, 107, 0.2);
}

/* Theme application */
body {
  background-color: var(--bg-body);
  color: var(--text);
}

.card, .modal-content {
  background-color: var(--bg-card);
  border-color: var(--border);
}

.card-header, .modal-header {
  background-color: var(--bg-hover);
  border-color: var(--border);
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-primary:focus, .btn-primary:active {
  background-color: var(--primary-active);
  border-color: var(--primary-active);
  box-shadow: var(--focus-ring);
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}

.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--text-inverse);
}

.btn-secondary:hover {
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
}

.btn-outline-secondary {
  color: var(--secondary);
  border-color: var(--secondary);
}

.btn-outline-secondary:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--text-inverse);
}

.table {
  color: var(--text);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark-theme .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.08); /* Slightly increased for better visibility */
}

.border {
  border-color: var(--border) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.bg-light {
  background-color: var(--bg-hover) !important;
}

.bg-dark {
  background-color: var(--bg-active) !important;
}

/* Form controls */
.form-control {
  background-color: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}

.form-control:focus {
  background-color: var(--bg-card);
  border-color: var(--primary);
  color: var(--text);
  box-shadow: var(--focus-ring);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--bg-hover);
}

/* Alert styles */
.alert-primary {
  background-color: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.alert-success {
  background-color: var(--success-light);
  border-color: var(--success);
  color: var(--success);
}

.alert-danger {
  background-color: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}

.alert-warning {
  background-color: var(--warning-light);
  border-color: var(--warning);
  color: var(--warning);
}

.alert-info {
  background-color: var(--info-light);
  border-color: var(--info);
  color: var(--info);
}

/* Improved alert styles for dark mode */
.dark-theme .alert-primary {
  color: #b3d1ff;
}

.dark-theme .alert-success {
  color: #a3e9a3;
}

.dark-theme .alert-danger {
  color: #ffb3b3;
}

.dark-theme .alert-warning {
  color: #ffe066;
}

.dark-theme .alert-info {
  color: #99d1ff;
}

/* Navbar */
.navbar-dark {
  background-color: var(--primary);
}

.dark-theme .navbar-dark {
  background-color: #232729; /* Slightly darker than body background */
}

/* Theme switcher */
.theme-switcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--bg-card);
  color: var(--text);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px var(--shadow);
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
}

.theme-switcher:hover {
  transform: scale(1.1);
}

/* Smooth scrolling with reduced-motion guard */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }