sfp_front_vue_diarista_prestador/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
  "primary-button": #9A7FF6,
  // Slightly lighter purple for buttons

  // 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": #555555,
  // Text Colors light
  "text-light": #BBBBBB,
  // 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

  // Pastel Background Variants (for chips/badges)
  "success-bg": #D1FAE5,
  // Light Green background
  "warning-bg": #FEF3C7,
  // Light Amber background
  "info-bg": #DBEAFE,
  // Light Blue background
  "secondary-bg": #FCE7F3,
  // Light Pink background
  "neutral-bg": #F3F4F6,
  // Light Grey background
  "status-finished": #9CA3AF,
  // Grey text for finished status

  // Teal — Pago antecipado chip
  "teal-bg": #CCFBF1,
  "teal":    #0D9488
);

// Standalone status chip variables (usable in component scoped SCSS)
$status-bg-pending:   #FEF3C7;
$status-bg-confirmed: #D1FAE5;
$status-bg-started:   #DBEAFE;
$status-bg-finished:  #F3F4F6;
$status-bg-cancelled: #FCE7F3;
$status-color-finished: #9CA3AF;

// Dark Theme Color Overrides
// $colors-dark: (
//   // Primary Colors and Variants (Purple - adjusted for dark mode)
//   "primary": #8B5CF6,
//   // Vibrant Purple (same as light)
//   "primary-light": #A78BFA,
//   // Light Purple
//   "primary-dark": #6D28D9,
//   // Darker Purple for dark mode

//   "dark": #1d1d1d,

//   // Secondary Colors (Pink - adjusted for dark mode)
//   "secondary": #F472B6,
//   // Lighter Pink for dark mode
//   "secondary-light": #FBCFE8,
//   // Very Light Pink
//   "secondary-dark": #DB2777,
//   // Dark Pink

//   // Tertiary Colors (Amber - adjusted for dark mode)
//   "terciary": #FBBF24,
//   // Lighter Amber for dark mode
//   "terciary-light": #FDE68A,
//   // Very Light Amber
//   "terciary-dark": #F59E0B,
//   // Amber

//   // Dark Mode Backgrounds
//   "page": #0F172A,
//   // Very Dark Blue-Gray

//   "surface": #1E293B,
//   // Dark Blue-Gray (Cards)
//   "surface-light": #334155,
//   // Medium Blue-Gray
//   "surface-dark": #0F172A,
//   // Very Dark Blue-Gray

//   "text": #F1F5F9,
//   // Almost White

//   // Status Colors - Adjusted for Dark Mode
//   "success": #34D399,
//   // Lighter Emerald for visibility
//   "success-light": #6EE7B7,
//   // Very Light Green
//   "success-dark": #10B981,
//   // Emerald

//   "error": #F87171,
//   // Lighter Red for visibility
//   "error-light": #FCA5A5,
//   // Very Light Red
//   "error-dark": #EF4444,
//   // Red

//   "warning": #FBBF24,
//   // Lighter Amber for visibility
//   "warning-light": #FDE68A,
//   // Very Light Amber
//   "warning-dark": #F59E0B,
//   // Amber

//   "info": #60A5FA,
//   // Lighter Blue for visibility
//   "info-light": #93C5FD,
//   // Very Light Blue
//   "info-dark": #3B82F6
//   // 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;
//     }
//   }
// }