/* ============================================================ LIGHT THEME ============================================================ Activated by data-bs-theme="light" on or wrapper. This file defines: - Surface colors (backgrounds at different elevations) - Text colors (primary, secondary, muted) - Border colors - Bootstrap variable overrides (--bs-*) - Component-specific theme tokens (sidebar, topbar, cards) ============================================================ */ [data-bs-theme="light"] { /* ===== SURFACES ===== */ --surface-base: #FFFFFF; /* page background, main content area */ --surface-raised: #FAFAF9; /* cards, sidebar background — slightly tinted */ --surface-sunken: #F4F4F3; /* search input, subtle insets */ --surface-overlay: #FFFFFF; /* dropdowns, popovers, modals */ --surface-hover: rgba(0, 0, 0, 0.035); --surface-active: rgba(0, 0, 0, 0.06); /* ===== TEXT ===== */ --text-primary: #0F0F10; /* primary content */ --text-secondary: #6B6B73; /* descriptions, meta */ --text-muted: #9B9BA1; /* placeholders, disabled */ --text-inverse: #FFFFFF; /* text on brand-colored backgrounds */ --text-link: var(--brand-500); --text-link-hover: var(--brand-600); /* ===== BORDERS ===== */ --border-subtle: rgba(0, 0, 0, 0.05); --border-default: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); --border-focus: var(--brand-500); /* ===== SHADOWS ===== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.03); /* ===== SIDEBAR (component-specific) ===== */ --sidebar-bg: var(--surface-raised); --sidebar-border: var(--border-subtle); --sidebar-logo-color: var(--text-primary); --sidebar-section-label: #5C5C66; --sidebar-item-color: #5A5A63; --sidebar-item-hover-bg: var(--surface-hover); --sidebar-item-active-bg: var(--brand-alpha-08); --sidebar-item-active-color: var(--brand-500); --sidebar-item-active-border: var(--brand-500); --sidebar-badge-bg: rgba(0, 0, 0, 0.06); --sidebar-badge-color: #5A5A63; --sidebar-active-badge-bg: var(--brand-alpha-18); --sidebar-active-badge-color: var(--brand-500); /* ===== TOPBAR ===== */ --topbar-bg: var(--surface-base); --topbar-border: var(--border-subtle); --topbar-search-bg: var(--surface-sunken); --topbar-kbd-bg: #FFFFFF; --topbar-kbd-border: rgba(0, 0, 0, 0.08); --topbar-kbd-color: #5A5A63; /* ===== TABLE ===== */ --table-row-hover-bg: var(--surface-raised); --table-row-inactive-bg: #F0F0EE; /* muted warm-grey — clearly dimmed but readable */ --table-header-color: var(--text-muted); --table-border: var(--border-subtle); /* ===== STATUS BADGES (background + text) ===== */ --badge-success-bg: rgba(59, 109, 17, 0.10); --badge-success-fg: #3B6D11; --badge-info-bg: rgba(24, 95, 165, 0.10); --badge-info-fg: #185FA5; --badge-warning-bg: rgba(245, 147, 13, 0.12); --badge-warning-fg: #C47409; --badge-danger-bg: rgba(153, 60, 29, 0.10); --badge-danger-fg: #993C1D; --badge-neutral-bg: rgba(0, 0, 0, 0.06); --badge-neutral-fg: #5A5A63; /* ===== SEMANTIC TEXT (deltas, validation) ===== */ --color-success: #0F6E56; --color-danger: #993C1D; --color-warning: #C47409; /* darkened amber — readable on white */ --color-info: #185FA5; /* ===== METRIC ICON TINTS ===== */ --icon-tint-brand-bg: var(--brand-alpha-08); --icon-tint-brand-fg: var(--brand-500); --icon-tint-info-bg: rgba(24, 95, 165, 0.10); --icon-tint-info-fg: #185FA5; --icon-tint-success-bg: rgba(59, 109, 17, 0.10); --icon-tint-success-fg: #3B6D11; --icon-tint-warning-bg: rgba(245, 147, 13, 0.12); --icon-tint-warning-fg: #C47409; /* ===== CHART COLORS ===== */ --chart-grid: rgba(0, 0, 0, 0.05); --chart-area-fill: var(--brand-alpha-12); --chart-area-line: var(--brand-500); --chart-axis-label: var(--text-muted); /* ===== BOOTSTRAP VARIABLE OVERRIDES ===== These override Bootstrap 5.3's built-in tokens so that all .btn, .card, .form-control, .nav, etc. components automatically pick up our theme. */ /* Body */ --bs-body-bg: var(--surface-base); --bs-body-color: var(--text-primary); --bs-body-secondary-bg: var(--surface-raised); --bs-body-secondary-color: var(--text-secondary); --bs-body-tertiary-bg: var(--surface-sunken); --bs-body-tertiary-color: var(--text-muted); --bs-emphasis-color: var(--text-primary); /* Borders */ --bs-border-color: var(--border-default); --bs-border-color-translucent: var(--border-subtle); /* Primary = brand color */ --bs-primary: var(--brand-500); --bs-primary-rgb: 37, 99, 235; /* #2563EB — Roomzy blue */ --bs-primary-bg-subtle: var(--brand-50); --bs-primary-border-subtle: var(--brand-200); --bs-primary-text-emphasis: var(--brand-700); /* Link */ --bs-link-color: var(--brand-500); --bs-link-color-rgb: 37, 99, 235; /* #2563EB */ --bs-link-hover-color: var(--brand-600); --bs-link-hover-color-rgb: 29, 78, 216; /* #1D4ED8 */ /* Form control */ --bs-form-control-bg: var(--surface-base); --bs-form-control-disabled-bg: var(--surface-sunken); /* Cards */ --bs-card-bg: var(--surface-raised); --bs-card-border-color: var(--border-subtle); --bs-card-cap-bg: transparent; /* Tables */ --bs-table-bg: transparent; --bs-table-hover-bg: var(--surface-raised); --bs-table-border-color: var(--border-subtle); /* Dropdown */ --bs-dropdown-bg: var(--surface-overlay); --bs-dropdown-border-color: var(--border-default); --bs-dropdown-link-hover-bg: var(--surface-hover); --bs-dropdown-link-active-bg: var(--brand-alpha-08); --bs-dropdown-link-active-color: var(--brand-500); /* Modal */ --bs-modal-bg: var(--surface-overlay); --bs-modal-border-color: var(--border-default); /* Semantic colors (--bs-danger, --bs-success, --bs-warning, --bs-info) are intentionally NOT overridden. Bootstrap 5.3's native palette already fits the Roomzy brand direction, and text-bg-* classes ship with compiled contrast (white/black text) that breaks if we recolor the backgrounds. Brand identity lives on --bs-primary only. */ }