/* ============================================================================= BASE THEME SYSTEM ============================================================================= This file defines the CSS custom properties (variables) that all themes use. Each theme overrides these variables to create different visual styles. Theme Structure: - Colors: Primary, secondary, accent, background, text - Typography: Font families, sizes, weights - Spacing: Margins, paddings, borders - Effects: Shadows, transitions, borders Usage: Themes are loaded via data-theme attribute on element. Example: Theme CSS files should follow this naming convention: - default.css (original blue theme) - rustic.css (rustic minimalist theme) - dark.css (dark mode theme) */ /* ============================================================================= DEFAULT THEME VARIABLES ============================================================================= */ :root { /* Primary Colors */ --primary-color: #007bff; --primary-hover: #0056b3; --primary-light: #cce7ff; --primary-dark: #004085; /* Secondary Colors */ --secondary-color: #6c757d; --secondary-hover: #545862; --secondary-light: #f8f9fa; --secondary-dark: #495057; /* Accent Colors */ --accent-color: #28a745; --accent-hover: #1e7e34; --warning-color: #ffc107; --warning-hover: #e0a800; --danger-color: #dc3545; --danger-hover: #c82333; /* Background Colors */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #e9ecef; --bg-dark: #343a40; --bg-light: #ffffff; /* Text Colors */ --text-primary: #212529; --text-secondary: #6c757d; --text-muted: #6c757d; --text-light: #ffffff; --text-dark: #000000; /* Border Colors */ --border-color: #dee2e6; --border-light: #e9ecef; --border-dark: #adb5bd; /* Navigation */ --nav-bg: linear-gradient(135deg, #007bff 0%, #0056b3 100%); --nav-text: #ffffff; --nav-hover: rgba(255, 255, 255, 0.1); --nav-active: rgba(255, 255, 255, 0.2); /* Cards & Components */ --card-bg: #ffffff; --card-border: #dee2e6; --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --card-hover-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Forms */ --input-bg: #ffffff; --input-border: #ced4da; --input-focus: #80bdff; --input-text: #495057; /* Buttons */ --btn-border-radius: 0.375rem; --btn-padding: 0.375rem 0.75rem; --btn-font-weight: 400; /* Typography */ --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-base: 1rem; --line-height-base: 1.5; --font-weight-normal: 400; --font-weight-bold: 700; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 3rem; /* Border Radius */ --border-radius-sm: 0.25rem; --border-radius-base: 0.375rem; --border-radius-lg: 0.5rem; --border-radius-xl: 1rem; /* Shadows */ --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --shadow-base: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); /* Transitions */ --transition-base: all 0.3s ease; --transition-fast: all 0.15s ease; --transition-slow: all 0.5s ease; } /* ============================================================================= MINIMAL BASE STYLES ============================================================================= This file only provides CSS variables for theming. Individual theme files will apply these variables to style components. This approach ensures the default theme preserves original Bootstrap styling. */ /* Theme transition for smooth switching */ * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }