authsec_angularClarity_modern/frontend/angular-clarity-master/src/styles/_theme-variables.scss

// ========================================
// DYNAMIC THEME VARIABLES
// ========================================
@import './design-tokens';
// CSS Custom Properties for Dynamic Theming
// These variables will be set by the ThemeService at runtime

:root {
  // Default theme variables (fallback values)
  --theme-primary: #0ea5e9;
  --theme-secondary: #64748b;
  --theme-accent: #8b5cf6;
  --theme-background: #f8fafc;
  --theme-surface: #ffffff;
  --theme-text: #111827;
  --theme-text-secondary: #6b7280;
  
  // Font variables
  --theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --theme-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  
  // Other theme properties
  --theme-border-radius: 0.75rem;
  --theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  // Derived colors for better theme integration
  --theme-primary-50: #{rgba(#0ea5e9, 0.05)};
  --theme-primary-100: #{rgba(#0ea5e9, 0.1)};
  --theme-primary-200: #{rgba(#0ea5e9, 0.2)};
  --theme-primary-300: #{rgba(#0ea5e9, 0.3)};
  --theme-primary-500: #0ea5e9;
  --theme-primary-600: #{darken(#0ea5e9, 10%)};
  --theme-primary-700: #{darken(#0ea5e9, 20%)};
  --theme-primary-800: #{darken(#0ea5e9, 30%)};
  --theme-primary-900: #{darken(#0ea5e9, 40%)};
  
  // Gradient definitions using theme colors
  --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-700) 100%);
  --theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, #{darken(#64748b, 20%)} 100%);
  --theme-gradient-accent: linear-gradient(135deg, var(--theme-accent) 0%, #{darken(#8b5cf6, 20%)} 100%);
  
  // Glassmorphism effects
  --theme-glass-bg: rgba(255, 255, 255, 0.1);
  --theme-glass-border: rgba(255, 255, 255, 0.2);
  --theme-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

// Dark theme overrides
[data-theme="dark"] {
  --theme-background: #111827;
  --theme-surface: #1f2937;
  --theme-text: #f9fafb;
  --theme-text-secondary: #d1d5db;
  --theme-glass-bg: rgba(0, 0, 0, 0.1);
  --theme-glass-border: rgba(255, 255, 255, 0.1);
  --theme-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

// Theme-aware utility classes
// ========================================

// Background colors
.bg-theme-primary { background-color: var(--theme-primary) !important; }
.bg-theme-secondary { background-color: var(--theme-secondary) !important; }
.bg-theme-accent { background-color: var(--theme-accent) !important; }
.bg-theme-background { background-color: var(--theme-background) !important; }
.bg-theme-surface { background-color: var(--theme-surface) !important; }

// Text colors
.text-theme-primary { color: var(--theme-primary) !important; }
.text-theme-secondary { color: var(--theme-secondary) !important; }
.text-theme-accent { color: var(--theme-accent) !important; }
.text-theme-text { color: var(--theme-text) !important; }
.text-theme-text-secondary { color: var(--theme-text-secondary) !important; }

// Border colors
.border-theme-primary { border-color: var(--theme-primary) !important; }
.border-theme-secondary { border-color: var(--theme-secondary) !important; }
.border-theme-accent { border-color: var(--theme-accent) !important; }

// Gradients
.bg-gradient-theme-primary { background: var(--theme-gradient-primary) !important; }
.bg-gradient-theme-secondary { background: var(--theme-gradient-secondary) !important; }
.bg-gradient-theme-accent { background: var(--theme-gradient-accent) !important; }

// Font families
.font-theme-primary { font-family: var(--theme-font-primary) !important; }
.font-theme-secondary { font-family: var(--theme-font-secondary) !important; }
.font-theme-mono { font-family: var(--theme-font-mono) !important; }

// Border radius
.rounded-theme { border-radius: var(--theme-border-radius) !important; }

// Shadows
.shadow-theme { box-shadow: var(--theme-shadow) !important; }

// Glassmorphism effects
.glass-theme {
  background: var(--theme-glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--theme-glass-border) !important;
  box-shadow: var(--theme-glass-shadow) !important;
}

// Theme-aware component overrides
// ========================================

// Update existing component styles to use theme variables
.modern-card {
  background: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid rgba(var(--theme-text-secondary), 0.1);
  box-shadow: var(--theme-shadow);
}

.modern-btn {
  &.btn-primary {
    background: var(--theme-gradient-primary);
    color: white;
    border-color: var(--theme-primary-600);
  }

  &.btn-secondary {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: rgba(var(--theme-text-secondary), 0.2);
  }

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

.modern-form-group {
  .form-label {
    color: var(--theme-text);
  }

  .form-input {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: rgba(var(--theme-text-secondary), 0.2);

    &:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 0 0 3px var(--theme-primary-100);
    }

    &::placeholder {
      color: var(--theme-text-secondary);
    }
  }
}

.modern-table {
  background: var(--theme-surface);
  color: var(--theme-text);

  thead {
    background: var(--theme-background);

    th {
      color: var(--theme-text-secondary);
    }
  }

  tbody {
    tr {
      &:hover {
        background: var(--theme-background);
      }
    }

    td {
      color: var(--theme-text);
    }
  }
}

.modern-alert {
  &.alert-info {
    background: var(--theme-primary-100);
    border-color: var(--theme-primary-200);
    color: var(--theme-primary-800);
  }

  &.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: #065f46;
  }

  &.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
    color: #92400e;
  }

  &.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #991b1b;
  }
}

// Layout component theme integration
// ========================================

.modern-layout {
  background: var(--theme-background);
}

.modern-header {
  background: rgba(var(--theme-surface), 0.95);
  border-bottom: 1px solid rgba(var(--theme-text-secondary), 0.1);
  color: var(--theme-text);
}

.modern-branding {
  .company-title {
    color: var(--theme-text);
  }

  .company-subtitle {
    color: var(--theme-text-secondary);
  }
}

.modern-sidebar {
  background: rgba(var(--theme-surface), 0.98);
  border-right: 1px solid rgba(var(--theme-text-secondary), 0.05);
  color: var(--theme-text);
}

.modern-nav-link,
.modern-nav-link-single {
  color: var(--theme-text-secondary);

  &:hover {
    background: var(--theme-primary-100);
    color: var(--theme-primary-700);
  }

  &.active {
    background: var(--theme-primary-100);
    color: var(--theme-primary-800);
  }
}

.modern-user-button {
  background: transparent;
  color: var(--theme-text);
  border-color: rgba(var(--theme-text-secondary), 0.2);

  &:hover {
    background: var(--theme-background);
    border-color: rgba(var(--theme-text-secondary), 0.3);
  }
}

.modern-dropdown-menu {
  background: var(--theme-surface);
  border-color: rgba(var(--theme-text-secondary), 0.2);
  color: var(--theme-text);
}

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

  &:hover {
    background: var(--theme-background);
    color: var(--theme-text);
  }
}

// Dashboard theme integration
// ========================================

.modern-dashboard {
  background: var(--theme-background);
}

.welcome-section {
  background: var(--theme-gradient-primary);
  color: white;
}

.stats-card {
  background: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid rgba(var(--theme-text-secondary), 0.1);

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

  .stats-label {
    color: var(--theme-text-secondary);
  }
}

.action-card {
  background: var(--theme-surface);
  color: var(--theme-text);
  border-color: rgba(var(--theme-text-secondary), 0.2);

  &:hover {
    border-color: var(--theme-primary-300);
  }

  h3 {
    color: var(--theme-text);
  }

  p {
    color: var(--theme-text-secondary);
  }
}

.activity-card {
  background: var(--theme-surface);
  color: var(--theme-text);

  .activity-item {
    border-bottom-color: rgba(var(--theme-text-secondary), 0.1);

    &:hover {
      background: var(--theme-background);
    }

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

    .activity-time {
      color: var(--theme-text-secondary);
    }
  }
}

// Responsive theme adjustments
// ========================================

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --theme-background: #111827;
    --theme-surface: #1f2937;
    --theme-text: #f9fafb;
    --theme-text-secondary: #d1d5db;
  }
}

// Print styles
// ========================================

@media print {
  :root {
    --theme-background: white;
    --theme-surface: white;
    --theme-text: black;
    --theme-text-secondary: #666;
    --theme-shadow: none;
  }
}