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;
    }
  }
}