/**
 * Color Applications
 * ONLY file that applies color values to components
 * Reads variables defined inline by Theme.php
 * NO hardcoded hex values - ALL use CSS variables
 */

/* ============================================================================
   SECTION DEPTH & VISUAL RHYTHM SYSTEM
   Creates alternating backgrounds for visual separation and hierarchy
   Prevents flatness by ensuring sections don't inherit body background
   ========================================================================= */

/* Base section - uses offset background for separation from body */
.section,
.services-section,
.portfolio-section,
.testimonials-section,
.about-section,
.contact-section,
.clients-section,
.awards-section,
.tools-section,
.faq-section,
.skills-section,
.process-section-redesign,
.cta-section {
    background: var(--bg-section-base);
}

/* Alternating sections create visual rhythm */
.section:nth-of-type(even),
.services-section:nth-of-type(even),
.portfolio-section:nth-of-type(even),
.testimonials-section:nth-of-type(even),
.about-section:nth-of-type(even),
.contact-section:nth-of-type(even),
.cta-section:nth-of-type(even) {
    background: var(--bg-section-alt);
}

/* Hero section uses deepest layer (page base) */
.hero,
.hero-section {
    background: var(--bg-page-base);
}

/* ============================================================================
   ELEVATION HIERARCHY
   Higher elements use progressively elevated surface colors
   Cards always sit above their parent sections
   ========================================================================= */

/* Level 1: Cards - standard surface elevation */
.card,
.service-card,
.portfolio-card,
.testimonial-card,
.stat-card,
.pricing-card,
.admin-card,
.dashboard-widget,
.kanban-card,
.award-item,
.tool-item,
.faq-item,
.flow-card {
    background: var(--color-surface);
}

/* Level 2: Floating UI - highest elevation for overlays */
.modal,
.modal-content,
.dropdown-menu,
.search-dropdown,
.notification-dropdown,
.admin-dropdown-menu,
.toast,
.tooltip,
.popover,
.alert {
    background: var(--surface-floating);
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

.btn-primary:hover {
  filter: brightness(0.9);
  box-shadow: 0 4px 12px var(--color-primary-glow);
}

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

.btn-secondary:hover {
  filter: brightness(0.9);
}

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

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

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

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

.btn-accent {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.btn-accent:hover {
  filter: brightness(0.9);
}

/* Success, Warning, Danger button variants */
.btn-success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-success-text);
}

.btn-success:hover {
  filter: brightness(0.9);
  box-shadow: 0 4px 12px var(--color-success-light);
}

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

.btn-warning:hover {
  filter: brightness(0.9);
  box-shadow: 0 4px 12px var(--color-warning-light);
}

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

.btn-danger:hover {
  filter: brightness(0.9);
  box-shadow: 0 4px 12px var(--color-danger-light);
}

/* ===== CARDS ===== */
.card,
.panel,
.modal-content {
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  color: var(--color-text);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.card:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 95%, var(--color-primary) 5%);
  border-color: var(--color-primary);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(var(--color-primary-rgb), 0.12);
}

.card-header,
.panel-header {
  background: linear-gradient(145deg,
    rgba(var(--color-surface-rgb), 0.6),
    rgba(var(--color-surface-rgb), 0.8)
  );
  border-bottom: 1px solid rgba(var(--color-border-rgb), 0.5);
}

.card-footer {
  background: linear-gradient(145deg,
    rgba(var(--color-surface-rgb), 0.8),
    rgba(var(--color-surface-rgb), 0.6)
  );
  border-top: 1px solid rgba(var(--color-border-rgb), 0.5);
}

.card-title,
.panel-title {
  color: var(--color-text-surface);
}

/* ===== NAVIGATION ===== */
nav,
.navbar {
  background: rgba(var(--color-surface-rgb), 0.95);
  border-bottom-color: var(--color-border);
}

.navbar-logo,
.logo {
  color: var(--color-text-surface);
}

.nav-link,
.navbar-link {
  color: var(--color-text-surface);
  opacity: 0.8;
}

.nav-link:hover,
.navbar-link:hover,
.nav-link.active,
.navbar-link.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
  opacity: 1;
}

.navbar-toggle span,
.menu-toggle span {
  background: var(--color-text-surface);
}

.dropdown-menu {
  background: var(--surface-floating);
  border-color: var(--color-border);
}

.dropdown-item {
  color: var(--color-text-surface);
}

.dropdown-item:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
}

.dropdown-divider {
  background: var(--color-border);
}

.breadcrumb-item a {
  color: var(--color-primary);
}

.breadcrumb-item.active {
  color: var(--color-text-muted);
}

/* Mobile menu */
@media (max-width: 768px) {
  .navbar-menu,
  .nav-menu {
    background: var(--color-surface);
  }
}

/* ===== FORMS ===== */
.form-label,
label {
  color: var(--color-text);
}

.form-input,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.input-group-prepend,
.input-group-append {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.form-help,
.form-text {
  color: var(--color-text-muted);
}

/* ===== TABLES ===== */
.table thead,
table thead {
  background: linear-gradient(145deg,
    rgba(var(--color-background-rgb), 0.7),
    rgba(var(--color-background-rgb), 0.9)
  );
  border-bottom: 2px solid rgba(var(--color-border-rgb), 0.7);
}

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

.table tbody tr,
table tbody tr {
  border-bottom-color: var(--color-border);
}

.table tbody tr:hover,
table tbody tr:hover {
  background: var(--color-surface-elevated);
}

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

.table-striped tbody tr:nth-child(even) {
  background: var(--color-surface-elevated);
}

.table-bordered {
  border-color: var(--color-border);
}

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

.pagination-link {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.pagination-link:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-link.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

/* ===== MODALS ===== */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.modal {
  background: var(--surface-floating);
  border-color: var(--color-border);
}

.modal-header,
.modal-footer {
  border-color: var(--color-border);
}

.modal-title {
  color: var(--color-text-surface);
}

.modal-close {
  color: var(--color-text-surface);
  opacity: 0.7;
}

.modal-close:hover {
  background: var(--color-surface-elevated);
  color: var(--color-text-surface);
  opacity: 1;
}

.dialog-icon.success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.dialog-icon.warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.dialog-icon.danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.drawer-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.drawer {
  background: var(--color-surface);
}

/* ===== ALERTS ===== */
.alert {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  color: var(--color-text);
}

.alert-close:hover {
  background: var(--color-surface-elevated);
}

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

.alert-success > i,
.alert-success .alert-icon,
.alert-success > .d-flex > i {
  color: var(--color-success);
}

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

.alert-warning > i,
.alert-warning .alert-icon,
.alert-warning > .d-flex > i {
  color: var(--color-warning);
}

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

.alert-danger > i,
.alert-danger .alert-icon,
.alert-error > i,
.alert-error .alert-icon,
.alert-danger > .d-flex > i,
.alert-error > .d-flex > i {
  color: var(--color-danger);
}

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

.alert-info > i,
.alert-info .alert-icon,
.alert-info > .d-flex > i {
  color: var(--color-info);
}

.auth-divider::before,
.auth-divider::after {
  background: var(--color-border);
}

.toast-progress {
  background: var(--color-primary);
}

/* ===== BADGES ===== */
.badge {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.badge-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.badge-secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-text);
}

.badge-success {
  background: var(--color-success);
  color: var(--color-success-text);
}

.badge-warning {
  background: var(--color-warning);
  color: var(--color-warning-text);
}

.badge-danger,
.badge-error {
  background: var(--color-danger);
  color: var(--color-danger-text);
}

.badge-info {
  background: var(--color-info);
  color: var(--color-info-text);
}

.badge-dot::before {
  background: currentColor;
}

.badge-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.badge-notification {
  background: var(--color-danger);
  color: var(--color-danger-text);
}

/* Status badges */
.status-online {
  background: var(--color-success-light);
  color: var(--color-success);
}

.status-offline {
  background: var(--color-text-muted);
  color: var(--color-background);
}

.status-away {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.status-busy {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.status-pending {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.status-in-progress {
  background: var(--color-info-light);
  color: var(--color-info);
}

.status-completed {
  background: var(--color-success-light);
  color: var(--color-success);
}

.status-cancelled {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

/* Priority badges */
.priority-low {
  background: rgba(var(--color-text-muted), 0.1);
  color: var(--color-text-muted);
}

.priority-medium {
  background: var(--color-info-light);
  color: var(--color-info);
}

.priority-high {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.priority-critical {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

/* ===== KANBAN ===== */
.kanban-column {
  background: var(--color-surface-elevated);
}

.kanban-column-header {
  border-bottom-color: var(--color-border);
}

.kanban-column-count {
  background: var(--color-surface);
  color: var(--color-text);
}

.kanban-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.kanban-card-title {
  color: var(--color-text);
}

.kanban-card-number,
.kanban-card-client {
  color: var(--color-text-muted);
}

.kanban-card-meta {
  border-top-color: var(--color-border);
  color: var(--color-text-muted);
}

.kanban-card-priority.priority-low {
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
}

.kanban-card-priority.priority-normal {
  background: var(--color-info-light);
  color: var(--color-info);
}

.kanban-card-priority.priority-high {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.kanban-card-priority.priority-urgent {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.kanban-cards.drag-over {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
}

.kanban-card-btn {
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
}

.kanban-card-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ===== ADMIN PANEL ===== */
body {
  background: var(--color-background);
  color: var(--color-text);
}

.admin-sidebar {
  background: rgba(var(--color-surface-rgb), 0.7);
  border-right-color: var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.admin-sidebar-header {
  border-bottom-color: var(--color-border);
}

.sidebar-nav-item {
  color: var(--color-text);
}

.sidebar-nav-item:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
}

.sidebar-nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Enhanced sidebar section labels */
.sidebar-section-label {
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* Active indicator bar */
.sidebar-nav-item.active::before {
  background: var(--color-primary);
}

/* Footer styling */
.sidebar-footer {
  border-top: 1px solid var(--color-border);
}

.sidebar-footer-btn {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.sidebar-footer-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.2);
}

/* Collapsed tooltips */
.admin-layout.sidebar-collapsed .sidebar-nav-item[data-tooltip]::after {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Custom scrollbar colors */
.admin-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary-rgb), 0.3);
  border-radius: var(--radius-full);
}

.admin-navbar {
  background: rgba(var(--color-surface-rgb), 0.8);
  border-bottom-color: var(--color-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.search-toggle,
.notification-toggle,
.mobile-menu-toggle {
  color: var(--color-text);
}

.search-toggle:hover,
.notification-toggle:hover {
  background: var(--color-surface-elevated);
}

.search-dropdown,
.notification-dropdown {
  background: var(--surface-floating);
  border-color: var(--color-border);
}

.search-form,
.notification-header {
  border-bottom-color: var(--color-border);
}

.search-input {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text);
}

.search-input:focus {
  border-color: var(--color-primary);
}

.search-result-item {
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}

.search-result-item:hover {
  background: var(--color-surface-elevated);
}

.notification-badge {
  background: var(--color-danger);
  color: var(--color-danger-text);
}

.notification-item {
  color: var(--color-text);
}

.notification-item:hover {
  background: var(--color-surface-elevated);
}

.notification-item.unread {
  background: var(--color-primary-light);
  border-left-color: var(--color-primary);
}

.notification-icon.success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.notification-icon.warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.notification-icon.danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.notification-icon.info {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.admin-page-title {
  color: var(--color-text);
}

.stat-card {
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
}

.stat-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(var(--color-primary-rgb), 0.1);
  border-color: var(--color-primary);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-icon {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.stat-label {
  color: var(--color-text-muted);
}

.stat-value {
  color: var(--color-text);
}

.stat-trend.positive {
  color: var(--color-success);
}

.stat-trend.negative {
  color: var(--color-danger);
}

.stat-meta {
  color: var(--color-text-muted);
}

.stat-icon-primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.stat-icon-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.stat-icon-info {
  background: var(--color-info-light);
  color: var(--color-info);
}

.stat-icon-warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* Admin cards */
.admin-card {
  background: rgba(var(--color-surface-rgb), 0.8);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.admin-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.admin-card-header {
  border-bottom: none;
  background: linear-gradient(135deg, rgba(var(--color-surface-rgb), 0.5) 0%, rgba(var(--color-surface-rgb), 0.2) 100%);
}

.admin-card-title {
  color: var(--color-text-surface);
}

.admin-card-action {
  color: var(--color-primary);
}

.admin-card-action:hover {
  color: var(--color-primary-hover);
}

/* List groups */
.list-group-item {
  border-bottom-color: var(--color-border);
  color: var(--color-text-surface);
}

.list-group-item:hover {
  background: var(--color-surface-elevated);
}

/* Admin navbar dropdowns */
.admin-nav-btn {
  color: var(--color-text-surface);
}

.admin-nav-btn:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
}

.admin-nav-badge {
  background: var(--color-danger);
  color: var(--color-danger-text);
}

.admin-profile-avatar {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.admin-dropdown-menu {
  background: var(--surface-floating);
  border-color: var(--color-border);
}

.admin-dropdown-header {
  background: var(--color-surface-elevated);
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

.admin-dropdown-item {
  color: var(--color-text);
}

.admin-dropdown-item:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
}

.admin-dropdown-item-danger {
  color: var(--color-danger);
}

.admin-dropdown-item-danger:hover {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.admin-dropdown-divider {
  background: var(--color-border);
}

/* Settings Tabs */
.settings-tabs {
  /* Structure only */
}

.tabs-nav {
  border-bottom-color: var(--color-border);
  background: transparent;
}

.tabs-nav::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.tabs-nav::-webkit-scrollbar-track {
  background: transparent;
}

.tab-item {
  color: var(--color-text-muted);
  background: transparent;
}

.tab-item:hover {
  color: var(--color-text);
  background: rgba(var(--color-background-rgb), 0.6);
}

.tab-item.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: rgba(var(--color-background-rgb), 0.8);
}

.settings-header h1 {
  color: var(--color-text);
}

.settings-header p {
  color: var(--color-text-muted);
}

/* Page Editor */
.page-selector {
  background: rgba(var(--color-surface-rgb), 0.8);
  border-color: var(--color-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-selector-title {
  color: var(--color-text);
}

.page-item {
  color: var(--color-text);
  background: rgba(var(--color-surface-elevated-rgb), 0.5);
}

.page-item:hover {
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
}

.page-item.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.page-info-box {
  background: var(--color-info-light);
  color: var(--color-text);
  border: 1px solid var(--color-info);
}

.page-info-box i {
  color: var(--color-info);
}

/* Settings Card */
.settings-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.settings-card-header {
  background: linear-gradient(145deg,
    rgba(var(--color-surface-rgb), 0.6),
    rgba(var(--color-surface-rgb), 0.8)
  );
  border-bottom: 1px solid rgba(var(--color-border-rgb), 0.5);
}

.settings-card-title {
  color: var(--color-text-surface);
}

.settings-card-body {
  background: var(--color-surface);
  color: var(--color-text-surface);
}

/* Admin layout */
.admin-layout {
  background: linear-gradient(135deg, var(--color-background) 0%, var(--color-surface) 100%);
}

.admin-content {
  background: transparent;
  color: var(--color-text);
}

/* Admin page header */
.admin-page-header {
  border-bottom: 1px solid var(--color-border);
}

.admin-page-subtitle {
  color: var(--color-text-muted);
}

.admin-page-actions {
  /* No colors needed - buttons handle their own colors */
}

/* Admin navbar sections */
.admin-navbar-left,
.admin-navbar-right {
  /* No colors needed - inherit from admin-navbar */
}

.admin-nav-item {
  /* No colors needed - children handle colors */
}

.admin-profile-name {
  color: var(--color-text);
}

/* Admin sidebar nav */
.admin-sidebar-nav {
  /* No colors needed - nav items handle colors */
}

/* Admin grid and card body */
.admin-grid {
  /* No colors needed - pure layout */
}

.admin-card-body {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Admin dropdown item variants */
.admin-dropdown-item-muted {
  color: var(--color-text-muted);
}

.admin-dropdown {
  /* No colors needed - children handle colors */
}

.admin-profile-btn {
  /* Colors handled by admin-nav-btn */
}

.quick-actions {
  background: linear-gradient(135deg, rgba(var(--color-surface-rgb), 0.6) 0%, rgba(var(--color-surface-rgb), 0.9) 100%);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.quick-action-btns {
  /* No colors needed - buttons handle their own colors */
}

.quick-action-btn {
  background: rgba(var(--color-surface-rgb), 0.5);
  color: var(--color-text);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.quick-action-btn:hover {
  background: rgba(var(--color-surface-rgb), 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.quick-action-icon.primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.quick-action-icon.success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.quick-action-icon.warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* ===== DASHBOARD (CLIENT PORTAL) ===== */
.dashboard-sidebar {
  background: var(--color-surface);
  border-right-color: var(--color-border);
}

.dashboard-sidebar-header {
  border-bottom-color: var(--color-border);
}

.dashboard-logo {
  color: var(--color-text);
}

.dashboard-nav-item {
  color: var(--color-text);
}

.dashboard-nav-item:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
}

.dashboard-nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.dashboard-header {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
}

.dashboard-user {
  color: var(--color-text);
}

.dashboard-user:hover {
  background: var(--color-surface-elevated);
}

.dashboard-content {
  background: var(--color-background);
}

.dashboard-widget {
  background: rgba(var(--color-surface-rgb), 0.8);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dashboard-widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.02) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
}

.dashboard-widget:hover::before {
  opacity: 1;
}

.dashboard-widget-icon {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Dashboard layout */
.dashboard-layout {
  background: var(--color-background);
}

.dashboard-main {
  background: var(--color-background);
  color: var(--color-text);
}

.dashboard-container {
  /* No colors needed - pure layout */
}

.dashboard-grid {
  /* No colors needed - pure layout */
}

.dashboard-col {
  /* No colors needed - pure layout */
}

/* Dashboard widgets */
.dashboard-widgets {
  /* No colors needed - pure layout */
}

.dashboard-widget-header {
  border-bottom: 1px solid var(--color-border);
}

.dashboard-widget-title {
  color: var(--color-text);
}

/* Dashboard navigation */
.dashboard-nav {
  /* No colors needed - items handle their own colors */
}

.dashboard-menu-toggle {
  color: var(--color-text);
  background: transparent;
}

.dashboard-menu-toggle:hover {
  background: var(--color-surface-elevated);
}

/* Dashboard header sections */
.dashboard-header-left,
.dashboard-header-right {
  /* No colors needed - inherit from dashboard-header */
}

/* Dashboard user avatar */
.dashboard-user-avatar {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.project-item {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--color-surface) 100%, white 5%),
    var(--color-surface)
  );
  border-color: var(--color-border);
  color: var(--color-text);
}

.project-item:hover {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--color-surface) 100%, white 8%),
    color-mix(in srgb, var(--color-surface) 95%, var(--color-primary) 5%)
  );
  border-color: var(--color-primary);
}

.project-status {
  background: var(--color-success);
}

.invoice-item {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--color-surface) 100%, white 5%),
    var(--color-surface)
  );
  border-color: var(--color-border);
  color: var(--color-text);
}

.invoice-item:hover {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--color-surface) 100%, white 8%),
    color-mix(in srgb, var(--color-surface) 95%, var(--color-primary) 5%)
  );
  border-color: var(--color-primary);
}

.message-item {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--color-surface) 100%, white 5%),
    var(--color-surface)
  );
  border-color: var(--color-border);
  color: var(--color-text);
}

.message-item:hover {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--color-surface) 100%, white 8%),
    color-mix(in srgb, var(--color-surface) 95%, var(--color-primary) 5%)
  );
  border-color: var(--color-primary);
}

.message-unread {
  background: var(--color-primary);
}

.dashboard-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* ===== AUTH PAGES ===== */
.auth-page {
  background: var(--color-background);
}

.auth-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.auth-title {
  color: var(--color-text);
}

.auth-subtitle {
  color: var(--color-text-muted);
}

.auth-forgot {
  color: var(--color-primary);
}

.auth-forgot:hover {
  color: var(--color-primary-hover);
}

.auth-social-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.auth-social-btn:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
}

.auth-footer-link {
  color: var(--color-primary);
}

.auth-footer-link:hover {
  color: var(--color-primary-hover);
}

.password-strength-bar {
  background: var(--color-surface-elevated);
}

.password-strength-fill {
  background: var(--color-primary);
}

.auth-success-icon {
  background: var(--color-success-light);
  color: var(--color-success);
}

.auth-verification-icon {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.auth-verification-input {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text);
}

.auth-verification-input:focus {
  border-color: var(--color-primary);
}

.auth-resend-btn {
  color: var(--color-primary);
}

.auth-resend-btn:hover {
  color: var(--color-primary-hover);
}

.auth-terms a {
  color: var(--color-primary);
}

.input-icon {
  color: var(--color-text-muted);
}

.password-toggle {
  color: var(--color-text-muted);
}

.password-toggle:hover {
  color: var(--color-text);
}

.link-primary {
  color: var(--color-primary);
}

.link-primary:hover {
  color: var(--color-primary-hover);
}

.link-secondary {
  color: var(--color-text-muted);
}

.link-secondary:hover {
  color: var(--color-text);
}

/* ===== SKILL GRID ===== */
.skill-level-bar {
  background: var(--color-surface-elevated);
}

.skill-level-fill {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

.skill-level-text {
  color: var(--color-text-muted);
}

.sort-handle {
  color: var(--color-text-muted);
}

/* ===== DASHBOARD (CLIENT PORTAL) ===== */
.dashboard-body {
  background: linear-gradient(135deg, var(--color-background) 0%, var(--color-surface) 100%);
  color: var(--color-text);
}

/* Dashboard navbar (horizontal top bar) */
nav.dashboard-nav {
  background: rgba(var(--color-surface-rgb), 0.8);
  border-bottom-color: var(--color-border);
}

.nav-logo {
  color: var(--color-text);
}

.nav-link {
  color: var(--color-text-muted);
}

.nav-link:hover {
  color: var(--color-text);
  background: var(--color-surface-elevated);
}

.nav-link.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.nav-link .badge {
  background: var(--color-danger);
  color: var(--color-danger-text);
}

.search-toggle,
.notification-toggle {
  color: var(--color-text);
}

.search-toggle:hover,
.notification-toggle:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
}

.search-dropdown,
.notification-dropdown {
  background: var(--surface-floating);
  border-color: var(--color-border);
}

.search-input {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text);
}

.search-input:focus {
  border-color: var(--color-primary);
  outline: none;
}

.search-submit {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.notification-badge {
  background: var(--color-danger);
  color: var(--color-danger-text);
}

.notification-header {
  border-bottom-color: var(--color-border);
}

.notification-header h4 {
  color: var(--color-text);
}

.mark-all-read {
  color: var(--color-primary);
}

.mark-all-read:hover {
  background: var(--color-primary-light);
}

.notification-item {
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

.notification-item:hover {
  background: var(--color-surface-elevated);
}

.notification-item.unread::before {
  background: var(--color-primary);
}

.notification-icon {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.notification-icon.success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.notification-icon.warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.notification-icon.info {
  background: var(--color-info-light);
  color: var(--color-info);
}

.notification-footer {
  color: var(--color-primary);
  border-top-color: var(--color-border);
}

.notification-footer:hover {
  background: var(--color-surface-elevated);
}

.profile-btn {
  color: var(--color-text);
}

.profile-btn:hover {
  background: var(--color-surface-elevated);
}

.profile-avatar {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.dropdown-menu {
  background: var(--surface-floating);
  border-color: var(--color-border);
}

.dropdown-header {
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

.dropdown-user-info {
  color: var(--color-text);
}

.dropdown-item {
  color: var(--color-text);
}

.dropdown-item:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
}

.dropdown-item.text-danger {
  color: var(--color-danger);
}

.dropdown-item.text-danger:hover {
  background: var(--color-danger-light);
}

.dropdown-divider {
  background: var(--color-border);
}

.mobile-menu-toggle {
  color: var(--color-text);
}

.mobile-menu-toggle:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
}

.mobile-menu-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.dashboard-sidebar {
  background: var(--color-surface);
  border-right-color: var(--color-border);
}

.dashboard-sidebar-header {
  border-bottom-color: var(--color-border);
}

.dashboard-logo {
  color: var(--color-text);
}

.dashboard-nav-item {
  color: var(--color-text-muted);
}

.dashboard-nav-item:hover {
  background: var(--color-surface-elevated);
  color: var(--color-text);
}

.dashboard-nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.dashboard-header {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
}

.dashboard-user {
  color: var(--color-text);
}

.dashboard-user:hover {
  background: var(--color-surface-elevated);
}

.dashboard-widget {
  background: rgba(var(--color-surface-rgb), 0.8);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dashboard-widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.02) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
}

.dashboard-widget:hover::before {
  opacity: 1;
}

.dashboard-widget:hover {
  border-color: var(--color-primary);
}

/* Stats grid */
.stat-card {
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
}

.stat-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(var(--color-primary-rgb), 0.1);
  border-color: var(--color-primary);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-icon.primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.stat-icon.success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.stat-icon.info {
  background: var(--color-info-light);
  color: var(--color-info);
}

.stat-icon.warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.stat-label {
  color: var(--color-text-muted);
}

.stat-value {
  color: var(--color-text);
}

/* Quick actions */
.quick-actions {
  background: linear-gradient(135deg, rgba(var(--color-surface-rgb), 0.6) 0%, rgba(var(--color-surface-rgb), 0.9) 100%);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.quick-actions-title {
  color: var(--color-text);
}

.quick-action-btn {
  background: var(--color-surface);
  color: var(--color-text);
}

.quick-action-btn:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
}

.quick-action-icon.primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.quick-action-icon.success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.quick-action-icon.warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.quick-action-text h4 {
  color: var(--color-text);
}

.quick-action-text p {
  color: var(--color-text-muted);
}

/* Card */
.card-header {
  border-bottom-color: var(--color-border);
}

.card-header h3 {
  color: var(--color-text);
}

/* Button link */
.btn-link {
  color: var(--color-primary);
}

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

/* Project list */
.project-title {
  color: var(--color-text);
}

.project-number,
.project-date,
.project-meta {
  color: var(--color-text-muted);
}

/* Invoice list */
.invoice-number {
  color: var(--color-text);
}

.invoice-date {
  color: var(--color-text-muted);
}

.invoice-amount .amount {
  color: var(--color-text);
}

/* Payment summary */
.summary-item {
  border-bottom-color: var(--color-border);
}

.summary-label {
  color: var(--color-text-muted);
}

.summary-value {
  color: var(--color-text);
}

/* Status badges */
.status-badge {
  background: var(--color-surface-elevated);
  color: var(--color-text);
}

.status-badge.status-pending,
.status-badge.status-in_progress {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.status-badge.status-completed,
.status-badge.status-paid {
  background: var(--color-success-light);
  color: var(--color-success);
}

.status-badge.status-review,
.status-badge.status-sent,
.status-badge.status-viewed {
  background: var(--color-info-light);
  color: var(--color-info);
}

.status-badge.status-cancelled,
.status-badge.status-overdue {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.status-badge.status-revision {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Empty state */
.empty-state i {
  color: var(--color-text-muted);
}

.empty-state p {
  color: var(--color-text-muted);
}

/* Utility text colors */
.text-success {
  color: var(--color-success);
}

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

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

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

/* Message list */
.message-sender {
  color: var(--color-text);
}

.message-time {
  color: var(--color-text-muted);
}

.message-preview {
  color: var(--color-text-muted);
}

.message-unread {
  background: var(--color-primary);
}

/* Dashboard overlay */
.dashboard-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.sort-handle:hover {
  color: var(--color-text);
}

/* ===== THEME-SPECIFIC COLOR ENHANCEMENTS ===== */

/* Creative theme glow effects */
.theme-creative .btn-primary::after {
  background: var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary-glow);
}

.theme-creative::before {
  background: radial-gradient(circle at 20% 50%, var(--color-accent-glow), transparent 50%);
}

.theme-creative::after {
  background: radial-gradient(circle at 80% 80%, var(--color-primary-glow), transparent 50%);
}

/* 3D theme glassmorphism backgrounds */
.theme-threed .card,
.theme-threed .modal,
.theme-threed .dropdown-menu {
  background: rgba(var(--color-surface-rgb), 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.theme-threed .admin-sidebar,
.theme-threed .admin-navbar,
.theme-threed .dashboard-sidebar,
.theme-threed .dashboard-header {
  background: rgba(var(--color-surface-rgb), 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ============================================================
   SECTIONS COLORS
   ============================================================ */

/* ===== SECTIONS: HERO ===== */
.hero-eyebrow {
  color: var(--color-primary);
}

.hero-title,
.hero-subtitle {
  color: var(--color-text);
}

.stat-number {
  color: var(--color-text);
}

.stat-label {
  color: var(--color-text-muted);
}

.hero-background {
  background: var(--color-surface);
}

.scroll-indicator-line {
  background: var(--color-primary);
}

.scroll-indicator span {
  color: var(--color-text-muted);
}

/* ===== SECTIONS: PORTFOLIO ===== */
.filter-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

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

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

.portfolio-card {
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.portfolio-card:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 95%, var(--color-primary) 5%);
  border-color: var(--color-primary);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(var(--color-primary-rgb), 0.2);
}

.portfolio-card-placeholder {
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
}

.portfolio-card-category {
  background: rgba(var(--color-surface-rgb), 0.95);
  color: var(--color-text-surface);
  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.portfolio-card-title {
  color: var(--color-text);
}

.portfolio-card-description {
  color: var(--color-text-muted);
}

/* ===== SECTIONS: SERVICES ===== */
.service-card {
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.service-card:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 95%, var(--color-primary) 5%);
  border-color: var(--color-primary);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(var(--color-primary-rgb), 0.15);
}

.service-icon {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.service-icon i {
  color: var(--color-primary-text);
  opacity: 1;
  visibility: visible;
}

.info-icon {
  color: var(--color-primary) !important;
}

.info-icon i {
  color: var(--color-primary) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-style: normal !important;
  display: inline-block !important;
}

.service-title {
  color: var(--color-text);
}

.service-description {
  color: var(--color-text-muted);
}

.service-feature {
  color: var(--color-text);
}

.service-feature::before {
  color: var(--color-primary);
}

.service-link {
  color: var(--color-primary);
}

.service-link:hover {
  color: var(--color-primary-hover);
}

.process-number {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.process-title {
  color: var(--color-text);
}

.process-description {
  color: var(--color-text-muted);
}

/* ===== SECTIONS: TESTIMONIALS ===== */
.testimonial-card {
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.testimonial-card:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 95%, var(--color-accent) 5%);
  border-color: var(--color-accent);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(var(--color-accent-rgb), 0.15);
}

.testimonial-quote {
  color: var(--color-text);
}

.testimonial-quote::before {
  color: var(--color-text);
}

.rating-star {
  color: var(--color-warning);
}

.testimonial-author {
  border-top-color: var(--color-border);
}

.author-avatar-placeholder {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.author-name {
  color: var(--color-text);
}

.author-title {
  color: var(--color-text-muted);
}

.video-play-button {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.video-play-button:hover {
  background: var(--color-primary-hover);
}

.client-logo {
  color: var(--color-text-muted);
}

/* ===== SECTIONS: FOOTER ===== */
.footer {
  background: var(--color-surface);
  border-top-color: var(--color-border);
}

.footer-logo {
  color: var(--color-text-surface);
}

.footer-tagline {
  color: var(--color-text-surface);
  opacity: 0.7;
}

.footer-column-title {
  color: var(--color-text-surface);
}

.footer-links a {
  color: var(--color-text-surface);
  opacity: 0.8;
}

.footer-links a:hover {
  color: var(--color-primary);
  opacity: 1;
}

.social-link {
  background: var(--color-surface-elevated);
  color: var(--color-text-surface);
  border-color: var(--color-border);
}

.social-link:hover {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

.newsletter-title {
  color: var(--color-text-surface);
}

.newsletter-description {
  color: var(--color-text-surface);
  opacity: 0.7;
}

.newsletter-input {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text);
}

.newsletter-input::placeholder {
  color: var(--color-text-muted);
}

.newsletter-input:focus {
  border-color: var(--color-primary);
}

.newsletter-button {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.newsletter-button:hover {
  background: var(--color-primary-hover);
}

.footer-bottom {
  border-top-color: var(--color-border);
}

.footer-copyright {
  color: var(--color-text-surface);
  opacity: 0.6;
}

.footer-legal a {
  color: var(--color-text-surface);
  opacity: 0.7;
}

.footer-legal a:hover {
  color: var(--color-text-surface);
  opacity: 1;
}

.footer-contact-item {
  color: var(--color-text-surface);
  opacity: 0.7;
}

.footer-contact-icon {
  color: var(--color-text-surface);
  opacity: 0.6;
}

/* ===== SECTIONS: CTA ===== */
.section-eyebrow {
  color: var(--color-primary);
}

.section-title {
  color: var(--color-text);
}

.section-subtitle {
  color: var(--color-text-muted);
}

.cta-content {
  background:
    linear-gradient(135deg,
      rgba(var(--color-primary-rgb), 0.12) 0%,
      rgba(var(--color-accent-rgb), 0.08) 100%
    ),
    var(--color-surface-elevated);
  color: var(--color-text-surface);
  border: 2px solid rgba(var(--color-primary-rgb), 0.3);
  box-shadow:
    0 8px 32px rgba(var(--color-primary-rgb), 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

.cta-title {
  color: var(--color-text-surface);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-description {
  color: var(--color-text-surface);
  opacity: 0.9;
}

.cta-stat-number {
  color: var(--color-primary);
}

.cta-stat-label {
  color: var(--color-text-surface);
  opacity: 0.8;
}

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

.about-feature-icon {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.about-feature-title {
  color: var(--color-text);
}

.about-feature-description {
  color: var(--color-text-muted);
}

/* ===== SECTIONS: EXTRAS (Process, Awards, Tools, FAQ) ===== */

/* Process Section - Cascading Flow Design */
.process-background-orbs .orb {
  background: radial-gradient(circle at center,
    var(--color-primary),
    var(--color-secondary)
  );
}

.process-eyebrow {
  background: linear-gradient(135deg,
    var(--color-primary-light),
    color-mix(in srgb, var(--color-secondary) 30%, var(--color-primary-light) 70%)
  );
  color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.15);
}

.process-main-title {
  color: var(--color-text);
  background: linear-gradient(135deg,
    var(--color-text),
    color-mix(in srgb, var(--color-text) 80%, var(--color-primary) 20%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.process-main-subtitle {
  color: var(--color-text-muted);
}

.flow-card {
  background: linear-gradient(145deg,
    rgba(var(--color-surface-rgb), 0.95),
    rgba(var(--color-surface-rgb), 0.85)
  );
  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.flow-card::before {
  background: linear-gradient(135deg,
    var(--color-primary),
    var(--color-secondary),
    var(--color-accent)
  );
}

.flow-card:hover {
  background: linear-gradient(145deg,
    rgba(var(--color-surface-rgb), 1),
    color-mix(in srgb, var(--color-surface) 95%, var(--color-primary) 5%)
  );
  border-color: var(--color-primary);
}

.flow-number {
  background: linear-gradient(135deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 80%, var(--color-secondary) 20%)
  );
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

.flow-connector {
  background: linear-gradient(to bottom,
    var(--color-border),
    color-mix(in srgb, var(--color-border) 60%, var(--color-primary) 40%)
  );
}

.flow-connector::after {
  background: linear-gradient(to bottom,
    transparent,
    var(--color-primary),
    transparent
  );
}

.flow-title {
  color: var(--color-text);
}

.flow-description {
  color: var(--color-text-muted);
}

.flow-decoration {
  background: radial-gradient(circle at center,
    var(--color-primary),
    transparent
  );
}

.flow-card::after {
  background: linear-gradient(135deg,
    var(--color-primary-light),
    var(--color-secondary-light)
  );
}

/* Mission & Vision Section */
.mission-vision-section {
  background: var(--color-background);
}

.mission-vision-card {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.mission-vision-card:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

.mv-card-border {
  background: linear-gradient(135deg,
    var(--color-primary),
    var(--color-secondary),
    var(--color-accent)
  );
}

.mv-card-inner {
  background: linear-gradient(145deg,
    rgba(var(--color-surface-rgb), 0.98),
    rgba(var(--color-surface-rgb), 0.95)
  );
  border: 1px solid var(--color-border);
}

.mission-icon {
  background: linear-gradient(135deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 80%, var(--color-secondary) 20%)
  );
  color: var(--color-primary-text);
  box-shadow:
    0 8px 24px rgba(var(--color-primary-rgb), 0.3),
    inset 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.vision-icon {
  background: linear-gradient(135deg,
    var(--color-secondary),
    color-mix(in srgb, var(--color-secondary) 80%, var(--color-accent) 20%)
  );
  color: var(--color-secondary-text);
  box-shadow:
    0 8px 24px rgba(var(--color-secondary-rgb), 0.3),
    inset 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.mv-icon i {
  color: inherit;
}

.mv-icon::before {
  background: linear-gradient(135deg,
    var(--color-primary),
    var(--color-accent)
  );
}

.mv-title {
  color: var(--color-text);
  background: linear-gradient(135deg,
    var(--color-text),
    color-mix(in srgb, var(--color-text) 70%, var(--color-primary) 30%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mv-divider {
  background: linear-gradient(90deg,
    var(--color-primary),
    var(--color-secondary)
  );
}

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

/* Awards Section */
.award-item {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.award-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.award-image {
  background: var(--color-surface-elevated);
}

.award-title {
  color: var(--color-text);
}

.award-issuer {
  color: var(--color-text-muted);
}

.award-year {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Tools Section */
.tool-item {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.tool-item:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* FAQ Section */
.faq-item {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.faq-item:hover,
.faq-item.active {
  border-color: var(--color-primary);
}

.faq-question {
  color: var(--color-text);
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-icon {
  color: var(--color-primary);
}

.faq-answer p {
  color: var(--color-text-muted);
}


/* Skills Section */
.skill-header {
  color: var(--color-text);
}

.skill-level {
  color: var(--color-primary);
}

.skill-bar {
  background: var(--color-surface-elevated);
}

.skill-progress {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* ===== PAGE HEADER ===== */
.page-header::before {
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.page-title {
  color: var(--color-text);
}

.page-subtitle {
  color: var(--color-text-muted);
}

/* ===== SERVICE PRICE ===== */
.service-price {
  color: var(--color-primary);
  border-top-color: var(--color-border);
}

/* ===== 3D THEME CHARACTER COLORS ===== */
.theme-threed .section-header::after {
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  box-shadow: 0 0 20px var(--color-accent-glow);
}

/* ===== MODERN THEME CHARACTER COLORS ===== */
.theme-modern *:focus-visible {
  outline-color: var(--color-primary);
}

/* ===== UNIVERSAL COMPONENTS ===== */

/* Theme Toggle */
.theme-toggle {
  color: var(--color-text);
  border-color: var(--color-border);
  background: var(--color-surface);
}

.theme-toggle:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
}

.theme-toggle:focus-visible {
  outline-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Icon System */
.icon,
.icon-sun,
.icon-moon {
  color: var(--color-text);
}

/* Empty States */
.empty-state-icon {
  color: var(--color-text-muted);
}

.empty-state-title {
  color: var(--color-text);
}

.empty-state-text {
  color: var(--color-text-muted);
}

/* Logo Text */
.logo-text {
  color: var(--color-text);
}

/* Newsletter Message */
.newsletter-message {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  color: var(--color-text);
}

.newsletter-message.success {
  background: rgba(var(--color-success-rgb, 34, 197, 94), 0.1);
  color: var(--color-success, #22c55e);
  border-color: var(--color-success, #22c55e);
}

.newsletter-message.error {
  background: rgba(var(--color-danger-rgb), 0.1);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ===== SERVICES DETAIL PAGE ===== */

.service-detail {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--color-surface) 100%, white 5%),
    var(--color-surface)
  );
  border-color: var(--color-border);
}

.service-detail:hover {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--color-surface) 100%, white 8%),
    color-mix(in srgb, var(--color-surface) 95%, var(--color-primary) 5%)
  );
  border-color: var(--color-primary);
}

.service-icon-large {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.service-detail-title {
  color: var(--color-text);
}

.service-detail-subtitle,
.service-detail-description {
  color: var(--color-text);
}

.features-title {
  color: var(--color-text);
}

.features-list li {
  background: linear-gradient(145deg,
    rgba(var(--color-surface-rgb), 0.8),
    rgba(var(--color-surface-rgb), 0.95)
  );
  color: var(--color-text);
  border: 1px solid rgba(var(--color-border-rgb), 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.features-list li::before {
  color: var(--color-primary);
}

.service-info-grid {
  background: linear-gradient(145deg,
    rgba(var(--color-surface-rgb), 0.6),
    rgba(var(--color-surface-rgb), 0.8)
  );
  border-color: var(--color-border);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

.service-info-item {
  background: rgba(var(--color-surface-elevated-rgb), 0.4);
  border: 1px solid rgba(var(--color-border-rgb), 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.info-label {
  color: var(--color-text-muted);
}

.info-value {
  color: var(--color-text);
}

.service-actions {
  border-top-color: var(--color-border);
}

.service-faq {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
}

.faq-title {
  color: var(--color-text);
}

.faq-content {
  color: var(--color-text);
}

/* ===== CONTACT PAGE ===== */

.contact-form-wrapper {
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.contact-detail-item {
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

.contact-detail-item:hover {
  border-color: var(--color-primary);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(var(--color-primary-rgb), 0.12);
}

.contact-detail-icon {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.contact-detail-content h3 {
  color: var(--color-text);
}

.contact-detail-content p,
.contact-detail-content a {
  color: var(--color-text);
}

.contact-social h3 {
  color: var(--color-text);
}

.social-link {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}

.social-link:hover {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

.map-container {
  border-color: var(--color-border);
}

/* ===== PROJECT DETAIL PAGE ===== */

.project-category {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.project-header h1 {
  color: var(--color-text);
}

.project-header p {
  color: var(--color-text);
}

.project-featured-media {
  border-color: var(--color-border);
}

.project-content-section h2 {
  color: var(--color-text);
}

.project-description {
  color: var(--color-text);
}

.gallery-caption {
  background: linear-gradient(to top, var(--color-background), transparent);
  color: var(--color-text);
}

.lightbox {
  background: rgba(var(--color-surface-rgb), 0.95);
}

.lightbox-close {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.lightbox-close:hover {
  background: var(--color-danger);
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}

.meta-item {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
}

.meta-label {
  color: var(--color-text-muted);
}

.meta-value {
  color: var(--color-text);
}

.tag {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}

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

.share-btn {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

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

.share-btn.facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
}

.share-btn.twitter:hover {
  background: #1da1f2;
  border-color: #1da1f2;
}

.share-btn.linkedin:hover {
  background: #0a66c2;
  border-color: #0a66c2;
}

.share-btn.pinterest:hover {
  background: #e60023;
  border-color: #e60023;
}

.sidebar-widget {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.widget-title {
  color: var(--color-text);
}

.cta-widget h3 {
  color: var(--color-text);
}

.cta-widget p {
  color: var(--color-text);
}

.related-projects-section {
  border-top-color: var(--color-border);
}

.related-projects-section h2 {
  color: var(--color-text);
}

/* ===== PORTFOLIO ADDITIONS ===== */

.portfolio-card-badge {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: var(--color-primary-text);
  border-color: var(--color-accent);
}

.portfolio-card-tags .tag {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}

.portfolio-card-tags .tag:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ===== COLOR SETTINGS STYLES ===== */

.setting-description {
  color: var(--color-text-muted);
}

.setting-description strong {
  color: var(--color-text);
}

.setting-warning {
  background: var(--color-warning-light);
  border-left-color: var(--color-warning);
  color: var(--color-text);
}

.setting-warning i {
  color: var(--color-warning);
}

.setting-tip {
  background: var(--color-info-light);
  border-left-color: var(--color-info);
  color: var(--color-text);
}

.setting-tip i {
  color: var(--color-info);
}

.color-hex-input.invalid {
  border-color: var(--color-danger);
  background: var(--color-danger-light);
  color: var(--color-text);
}

/* Theme Selector Colors */
.theme-option {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.theme-option:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.15);
}

.theme-option.active {
  border-color: var(--color-primary);
  background: linear-gradient(145deg,
    rgba(var(--color-primary-rgb), 0.05),
    rgba(var(--color-surface-rgb), 1)
  );
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.2);
}

.theme-name {
  color: var(--color-text-surface);
}

.theme-description {
  color: var(--color-text-surface);
  opacity: 0.7;
}

/* ===== UTILITY CLASSES ===== */

.bg-light {
  background: var(--color-surface-elevated);
  color: var(--color-text);
}

.bg-dark {
  background: var(--color-background);
  color: var(--color-text);
}

/* ===== PROJECTS PAGE COLORS ===== */

/* Filters Bar */
.filters-bar {
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  border-color: color-mix(in srgb, var(--color-border) 40%, transparent);
}

.filter-select {
  background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
  border-color: var(--color-border);
  color: var(--color-text);
}

.filter-select:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
}

.filter-select:focus {
  outline-color: var(--color-primary);
  background: var(--color-surface-elevated);
}

.filters-bar .search-box input {
  background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
  border-color: var(--color-border);
  color: var(--color-text);
}

.filters-bar .search-box input:focus {
  outline-color: var(--color-primary);
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
}

.filters-bar .search-box input::placeholder {
  color: var(--color-text-muted);
}

/* Project Card */
.project-card {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  border-color: color-mix(in srgb, var(--color-border) 50%, transparent);
  color: var(--color-text);
}

.project-card:hover {
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  border-color: var(--color-primary);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.project-card::before {
  color: var(--color-primary);
}

.project-card-title h3 {
  color: var(--color-text);
}

.project-card-meta {
  background: color-mix(in srgb, var(--color-background) 30%, transparent);
  border-color: color-mix(in srgb, var(--color-border) 30%, transparent);
}

.project-card-footer {
  border-color: color-mix(in srgb, var(--color-border) 30%, transparent);
}

.project-card-action {
  background: color-mix(in srgb, var(--color-surface-elevated) 50%, transparent);
  border-color: var(--color-border);
  color: var(--color-text);
}

.project-card-action:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.project-card-action .badge-notification {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-surface);
}

/* Status Badges with specific colors */
.status-badge.status-inquiry {
  background: color-mix(in srgb, #6366f1 15%, transparent);
  color: #6366f1;
  border: 1px solid color-mix(in srgb, #6366f1 30%, transparent);
}

.status-badge.status-quoted {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #f59e0b;
  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

.status-badge.status-accepted {
  background: color-mix(in srgb, #10b981 15%, transparent);
  color: #10b981;
  border: 1px solid color-mix(in srgb, #10b981 30%, transparent);
}

.status-badge.status-in_progress {
  background: color-mix(in srgb, #3b82f6 15%, transparent);
  color: #3b82f6;
  border: 1px solid color-mix(in srgb, #3b82f6 30%, transparent);
}

.status-badge.status-review {
  background: color-mix(in srgb, #8b5cf6 15%, transparent);
  color: #8b5cf6;
  border: 1px solid color-mix(in srgb, #8b5cf6 30%, transparent);
}

.status-badge.status-revision {
  background: color-mix(in srgb, #f97316 15%, transparent);
  color: #f97316;
  border: 1px solid color-mix(in srgb, #f97316 30%, transparent);
}

.status-badge.status-completed {
  background: color-mix(in srgb, #059669 15%, transparent);
  color: #059669;
  border: 1px solid color-mix(in srgb, #059669 30%, transparent);
}

.status-badge.status-cancelled {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  color: #ef4444;
  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}

/* Projects Table */
.projects-table thead th {
  background: color-mix(in srgb, var(--color-surface-elevated) 70%, transparent);
  color: var(--color-text);
  border-color: var(--color-border);
}

.projects-table tbody tr {
  border-color: color-mix(in srgb, var(--color-border) 30%, transparent);
}

.projects-table tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

/* ============================================================================
   EMAIL TEMPLATES COMPONENT
   Colors for email template management interface
   ========================================================================= */

/* Email Tabs */
.email-tabs {
  border-bottom-color: var(--color-border);
}

.email-tab {
  color: var(--color-text-muted);
}

.email-tab:hover {
  color: var(--color-primary);
}

.email-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Template Cards */
.template-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.template-subject {
  color: var(--color-text-muted);
}

.variable-tag {
  background: var(--color-background-subtle);
  color: var(--color-text);
}

.badge-custom {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* Color Input */
.color-input-group input[type="color"] {
  border-color: var(--color-border);
}

.color-input-group .color-hex {
  background: var(--color-background-subtle);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Editor Toolbar */
.editor-toolbar {
  background: var(--color-background-subtle);
  border-color: var(--color-border);
}

.toolbar-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

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

/* Preview */
.preview-subject {
  background: var(--color-background-subtle);
}

.preview-frame-wrapper {
  background: #f5f5f5;
}

#preview-frame {
  border-color: var(--color-border);
}