:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --accent-color: #f093fb;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  --font-family-primary: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
  --font-family-headings: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-large: 18px;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --line-height-base: 1.5;
  --container-max-width: 1200px;
  --sidebar-width: 250px;
  --header-height: 70px;
  --border-radius-base: 8px;
  --border-radius-large: 15px;
  --box-shadow-base: 0 2px 10px rgba(0,0,0,0.1);
  --box-shadow-large: 0 8px 32px rgba(0,0,0,0.1);
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --button-border-radius: 25px;
  --button-padding-x: 24px;
  --button-padding-y: 12px;
  --card-border-radius: 15px;
  --card-padding: 20px;
  --transition-speed: 0.3s;
  --hover-scale: 1.02;
  --dark-mode-enabled: 0;
  --theme-preset: default;
}

/* Dynamic Theme Styles */
.btn-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border: none;
    border-radius: var(--button-border-radius);
    padding: var(--button-padding-y) var(--button-padding-x);
    transition: all var(--transition-speed) ease;
}

.btn-gradient:hover {
    transform: scale(var(--hover-scale));
    box-shadow: var(--box-shadow-large);
}

.card, .stats-card, .template-card {
    border-radius: var(--card-border-radius) !important;
    padding: var(--card-padding);
    box-shadow: var(--box-shadow-base);
    transition: all var(--transition-speed) ease;
}

.card:hover, .stats-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-large);
}

.page-header, .template-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
}

.sidebar {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    width: var(--sidebar-width);
}

.form-control, .form-select {
    border-radius: var(--border-radius-base);
    transition: all var(--transition-speed) ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
}

.container, .container-fluid {
    max-width: var(--container-max-width);
}

/* Dark Mode Styles */
.dark-mode {
    --light-color: #2d3436;
    --dark-color: #ddd;
    background-color: #1e1e1e;
    color: #ddd;
}

.dark-mode .card, 
.dark-mode .stats-card, 
.dark-mode .template-card {
    background-color: #2d3436;
    color: #ddd;
}

.dark-mode .form-control, 
.dark-mode .form-select {
    background-color: #2d3436;
    border-color: #555;
    color: #ddd;
}

.dark-mode .table {
    color: #ddd;
}

.dark-mode .table th {
    background-color: #343a40;
    color: #ddd;
}