/*--------------------------------------------------------------
# CSS Custom Properties - Color System
# Single accent color theming with comprehensive palette
--------------------------------------------------------------*/

/* Fonts */
:root {
  --default-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Plus Jakarta Sans", sans-serif;
  --nav-font: "Plus Jakarta Sans", sans-serif;
  --mono-font: "Fira Code", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

/* Spacing Scale */
:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
}

/* Border Radius */
:root {
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;
}

/* Shadows */
:root {
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.1), 0 4px 8px -2px rgb(0 0 0 / 0.04);
  --shadow-xl: 0 24px 48px -8px rgb(0 0 0 / 0.12), 0 8px 16px -4px rgb(0 0 0 / 0.06);
}

/* Transitions */
:root {
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Layout Dimensions */
:root {
  --header-height: 60px;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 70px;
  --footer-height: 60px;
}

/*--------------------------------------------------------------
# Global Colors - Light Mode
--------------------------------------------------------------*/
:root {
  /* Core palette */
  --background-color: #faf8f6;
  --default-color: #2d2a27;
  --heading-color: #1a1816;
  --accent-color: #6c5ce7;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;

  /* Extended text colors */
  --muted-color: #78716c;
  --light-color: #a8a29e;

  /* Borders */
  --border-color: #e7e5e4;
  --border-color-light: #f5f5f4;
  --border-color-dark: #d6d3d1;

  /* Status colors */
  --success-color: #10b981;
  --success-color-light: #d1fae5;
  --warning-color: #f59e0b;
  --warning-color-light: #fef3c7;
  --danger-color: #ef4444;
  --danger-color-light: #fee2e2;
  --info-color: #8b5cf6;
  --info-color-light: #ede9fe;

  /* Navigation colors */
  --nav-color: var(--default-color);
  --nav-hover-color: var(--accent-color);
  --nav-mobile-background-color: var(--surface-color);
  --nav-dropdown-background-color: var(--surface-color);
  --nav-dropdown-color: var(--default-color);
  --nav-dropdown-hover-color: var(--accent-color);

  /* Header */
  --header-bg: #ffffff;
  --header-shadow: none;
  --header-border: var(--border-color);

  /* Sidebar */
  --sidebar-bg: #1a1625;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-color: #c4b5d4;
  --sidebar-muted-color: #8b7ba8;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --sidebar-active-bg: rgba(255, 255, 255, 0.1);
  --sidebar-active-color: #ffffff;

  /* Cards */
  --card-bg: #ffffff;
  --card-shadow: var(--shadow-sm);
  --card-border: var(--border-color);

  /* Tables */
  --table-header-bg: #faf8f6;
  --table-hover-bg: #f5f5f4;
  --table-stripe-bg: #fafaf9;

  /* Forms */
  --input-bg: #ffffff;
  --input-border: var(--border-color);
  --input-focus-border: var(--accent-color);
  --input-focus-ring: rgb(108 92 231 / 0.25);
}

/*--------------------------------------------------------------
# Dark Mode Palette
--------------------------------------------------------------*/
[data-theme="dark"] {
  /* Core palette */
  --background-color: #13111a;
  --default-color: #e7e5e4;
  --heading-color: #fafaf9;
  --accent-color: #a78bfa;
  --surface-color: #1e1b2e;
  --contrast-color: #ffffff;

  /* Extended text colors */
  --muted-color: #a8a29e;
  --light-color: #78716c;

  /* Borders */
  --border-color: #2e2a3d;
  --border-color-light: #1e1b2e;
  --border-color-dark: #3d3854;

  /* Status colors (adjusted for dark mode) */
  --success-color: #34d399;
  --success-color-light: rgba(52, 211, 153, 0.15);
  --warning-color: #fbbf24;
  --warning-color-light: rgba(251, 191, 36, 0.15);
  --danger-color: #f87171;
  --danger-color-light: rgba(248, 113, 113, 0.15);
  --info-color: #a78bfa;
  --info-color-light: rgba(167, 139, 250, 0.15);

  /* Navigation colors */
  --nav-color: var(--default-color);
  --nav-hover-color: var(--accent-color);
  --nav-mobile-background-color: var(--surface-color);
  --nav-dropdown-background-color: var(--surface-color);
  --nav-dropdown-color: var(--default-color);
  --nav-dropdown-hover-color: var(--accent-color);

  /* Header */
  --header-bg: #1e1b2e;
  --header-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --header-border: var(--border-color);

  /* Sidebar */
  --sidebar-bg: #13111a;
  --sidebar-border: var(--border-color);
  --sidebar-color: #c4b5d4;
  --sidebar-muted-color: #8b7ba8;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --sidebar-active-bg: rgba(255, 255, 255, 0.1);
  --sidebar-active-color: #ffffff;

  /* Cards */
  --card-bg: #1e1b2e;
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --card-border: var(--border-color);

  /* Tables */
  --table-header-bg: #13111a;
  --table-hover-bg: #2e2a3d;
  --table-stripe-bg: #1a1828;

  /* Forms */
  --input-bg: #13111a;
  --input-border: var(--border-color);
  --input-focus-border: var(--accent-color);
  --input-focus-ring: rgb(167 139 250 / 0.25);

  /* Bootstrap overrides */
  --bs-body-color: var(--default-color);
  --bs-body-bg: var(--background-color);
}

/*--------------------------------------------------------------
# Color Utility Classes
# Override Bootstrap's color utilities with CSS custom properties
# for proper dark mode support
--------------------------------------------------------------*/

/* Text Colors */
.text-primary { color: var(--accent-color) !important; }
.text-secondary { color: var(--muted-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-muted { color: var(--muted-color) !important; }
.text-body { color: var(--default-color) !important; }

/* Background Colors */
.bg-primary { background-color: var(--accent-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }
.bg-info { background-color: var(--info-color) !important; }
.bg-light { background-color: var(--background-color) !important; }
.bg-body { background-color: var(--background-color) !important; }
.bg-surface { background-color: var(--surface-color) !important; }

/* Soft/Light Background Colors */
.bg-primary-light { background-color: color-mix(in srgb, var(--accent-color), transparent 90%) !important; }
.bg-success-light { background-color: var(--success-color-light) !important; }
.bg-warning-light { background-color: var(--warning-color-light) !important; }
.bg-danger-light { background-color: var(--danger-color-light) !important; }
.bg-info-light { background-color: var(--info-color-light) !important; }

/* Border Colors */
.border-primary { border-color: var(--accent-color) !important; }
.border-success { border-color: var(--success-color) !important; }
.border-warning { border-color: var(--warning-color) !important; }
.border-danger { border-color: var(--danger-color) !important; }
.border-info { border-color: var(--info-color) !important; }

/* Gradient Backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 15%)) !important;
}

.bg-gradient-success {
  background: linear-gradient(135deg, var(--success-color), #059669) !important;
}

.bg-gradient-warning {
  background: linear-gradient(135deg, var(--warning-color), #d97706) !important;
}

.bg-gradient-danger {
  background: linear-gradient(135deg, var(--danger-color), #dc2626) !important;
}

.bg-gradient-info {
  background: linear-gradient(135deg, var(--info-color), #7c3aed) !important;
}

/* Icon Colors */
.icon-primary { color: var(--accent-color); }
.icon-success { color: var(--success-color); }
.icon-warning { color: var(--warning-color); }
.icon-danger { color: var(--danger-color); }
.icon-info { color: var(--info-color); }
.icon-muted { color: var(--muted-color); }
