sfp_front_vue_diarista_backoffice/src/css/quasar.variables.scss

// Quasar SCSS Variables with Custom Color System
// --------------------------------------------------

// Primary Theme Colors
$primary: #8B5CF6; // Vibrant Purple (main brand color)
$secondary: #EC4899; // Pink/Magenta (secondary brand color)
$accent: #F59E0B; // Amber/Orange (accent highlights)

// Dark Theme Base Colors
$dark: #1d1d1d;

// Status Colors
$positive: #10B981; // Emerald Green (success, online status)
$negative: #EF4444; // Red (errors, alerts)
$info: #3B82F6; // Blue (informational)
$warning: #F59E0B; // Amber (warnings)

// Extended Color System with Light/Dark Variants
$colors: (
  // Primary Colors and Variants (Purple Theme)
  "primary": #8B5CF6,
  // Base - Vibrant Purple
  "primary-light": #A78BFA,
  // Light Purple
  "primary-dark": #7C3AED,
  // Dark Purple

  // Secondary Colors and Variants (Pink/Magenta Theme)
  "secondary": #EC4899,
  // Base - Pink
  "secondary-light": #F9A8D4,
  // Light Pink
  "secondary-dark": #DB2777,
  // Dark Pink

  // Tertiary Colors and Variants (Amber/Orange Accent)
  "terciary": #F59E0B,
  // Base - Amber
  "terciary-light": #FCD34D,
  // Light Amber
  "terciary-dark": #D97706,
  // Dark Amber

  // Background Colors
  "page": #F9FAFB,
  // Very Light Gray (App Background)

  // Surface Colors (Cards, Panels)
  "surface": #FFFFFF,
  // Pure White
  "surface-light": #F9FAFB,
  // Very Light Gray
  "surface-dark": #F3F4F6,
  // Light Gray

  // Text Colors
  "text": #111827,
  // Very Dark Gray (almost black)

  // Status Colors with Variants
  "success": #10B981,
  // Emerald Green
  "success-light": #34D399,
  // Light Green
  "success-dark": #059669,
  // Dark Green

  "error": #EF4444,
  // Red
  "error-light": #F87171,
  // Light Red
  "error-dark": #DC2626,
  // Dark Red

  "warning": #F59E0B,
  // Amber
  "warning-light": #FCD34D,
  // Light Amber
  "warning-dark": #D97706,
  // Dark Amber

  "info": #3B82F6,
  // Blue
  "info-light": #60A5FA,
  // Light Blue
  "info-dark": #2563EB
  // Dark Blue
);

// Dark Theme Color Overrides
// $colors-dark: (
//   // Primary Colors and Variants (Purple Theme)
//   "primary": #8B5CF6,
//   // Base - Vibrant Purple
//   "primary-light": #A78BFA,
//   // Light Purple
//   "primary-dark": #7C3AED,
//   // Dark Purple

//   // Secondary Colors and Variants (Pink/Magenta Theme)
//   "secondary": #EC4899,
//   // Base - Pink
//   "secondary-light": #F9A8D4,
//   // Light Pink
//   "secondary-dark": #DB2777,
//   // Dark Pink

//   // Tertiary Colors and Variants (Amber/Orange Accent)
//   "terciary": #F59E0B,
//   // Base - Amber
//   "terciary-light": #FCD34D,
//   // Light Amber
//   "terciary-dark": #D97706,
//   // Dark Amber

//   // Background Colors
//   "page": #F9FAFB,
//   // Very Light Gray (App Background)

//   // Surface Colors (Cards, Panels)
//   "surface": #FFFFFF,
//   // Pure White
//   "surface-light": #F9FAFB,
//   // Very Light Gray
//   "surface-dark": #F3F4F6,
//   // Light Gray

//   // Text Colors
//   "text": #111827,
//   // Very Dark Gray (almost black)

//   // Status Colors with Variants
//   "success": #10B981,
//   // Emerald Green
//   "success-light": #34D399,
//   // Light Green
//   "success-dark": #059669,
//   // Dark Green

//   "error": #EF4444,
//   // Red
//   "error-light": #F87171,
//   // Light Red
//   "error-dark": #DC2626,
//   // Dark Red

//   "warning": #F59E0B,
//   // Amber
//   "warning-light": #FCD34D,
//   // Light Amber
//   "warning-dark": #D97706,
//   // Dark Amber

//   "info": #3B82F6,
//   // Blue
//   "info-light": #60A5FA,
//   // Light Blue
//   "info-dark": #2563EB
//   // Dark Blue
// );

// Generate color utility classes for light theme
@each $name, $color in $colors {
  .text-#{$name} {
    color: $color !important;
  }
  .bg-#{$name} {
    background: $color !important;
  }
}

// Generate color utility classes for dark theme
// .body--dark {
//   @each $name, $color in $colors-dark {
//     .text-#{$name} {
//       color: $color !important;
//     }
//     .bg-#{$name} {
//       background: $color !important;
//     }
//   }
// }