// Quasar SCSS Variables with Material Design Color System
// --------------------------------------------------

// ─── Standalone variables (usable directly in SCSS via $var-name) ────────────

// Brand
$primary:             #661d75;
$primary-4:           #cde8c2;

// Violet (SerPrati brand)
$violet-light:        #f0e8f1;
$violet-light-hover:  #e8ddea;
$violet-light-active: #d0b9d4;
$violet-normal:       #661d75;
$violet-normal-hover: #5c1a69;
$violet-normal-active:#52175e;
$violet-dark:         #4d1658;
$violet-dark-hover:   #3d1146;
$violet-dark-active:  #2e0d35;
$violet-darker:       #240a29;

// Neutral
$neutral-light:        #fefefe;
$neutral-light-hover:  #fdfdfd;
$neutral-light-active: #fbfbfb;
$neutral-normal:       #f2f2f2;
$neutral-normal-hover: #dadada;
$neutral-normal-active:#c2c2c2;
$neutral-dark:         #b6b6b6;
$neutral-dark-hover:   #919191;
$neutral-dark-active:  #6d6d6d;
$neutral-darker:       #555555;

// Surface
$surface: #FEFEFE;

// Text
$color-text:  #161616;
$color-text-2:#505050;
$white-2:     #fefcff;
$color-border:#c0c0c0;

// Dark base
$dark: #1d1d1d;

// Status Colors
$positive: #2e7d32; // Material Green 800
$negative: #d32f2f; // Material Red 700
$info: #0288d1; // Material Light Blue 700
$inactive: #FFE100; // Material Orange 800

// Extended Color System with Light/Dark Variants
$colors: (
  // Brand Colors
  // $primary: #35a30a;
  "primary": #661d75,
  "primary-4": #cde8c2,

  "text": #161616,
  "text-2": #505050,
  "white-2": #fefcff,

  "border": #c0c0c0,
  // "error": #d4183d,

  // Violet Colors
  "violet-light": #f0e8f1,
  "violet-light-hover": #e8ddea,
  "violet-light-active": #d0b9d4,
  "violet-normal": #661d75,
  "violet-normal-hover": #5c1a69,
  "violet-normal-active": #52175e,
  "violet-dark": #4d1658,
  "violet-dark-hover": #3d1146,
  "violet-dark-active": #2e0d35,
  "violet-darker": #240a29,

  // Neutral Colors
  "neutral-light": #fefefe,
  "neutral-light-hover": #fdfdfd,
  "neutral-light-active": #fbfbfb,
  "neutral-normal": #f2f2f2,
  "neutral-normal-hover": #dadada,
  "neutral-normal-active": #c2c2c2,
  "neutral-dark": #b6b6b6,
  "neutral-dark-hover": #919191,
  "neutral-dark-active": #6d6d6d,
  "neutral-darker": #555555,

  //text color
  // "text": #000000,

  // Status Colors with Variants
  "success": #2e7d32,
  // Green 800
  "success-light": #4caf50,
  // Green 500
  "success-dark": #1b5e20,

  // Green 900
  "error": #d32f2f,
  // Red 700
  "error-light": #ef5350,
  // Red 400
  "error-dark": #c62828,

  // Red 800
  "warning": #FFE100,
  // Orange 800
  "warning-light": #ff9800,
  // Orange 500
  "warning-dark": #e65100,

  // Orange 900
  "info": #0288d1,
  // Light Blue 700
  "info-light": #03a9f4,
  // Light Blue 500
  "info-dark": #01579b,

  // Surface
  "surface": #FEFEFE,

  // Inactive
  "inactive": #ed6c02
);

// Dark Theme Color Overrides
// $colors-dark: (
//   // Primary Colors and Variants
//   "primary": #1976d2,
//   // Base - Blue 700
//   "primary-light": #42a5f5,
//   // Blue 50
//   "primary-dark": #1565c0,

//   "dark": #1d1d1d,

//   // Blue 400
//   // Secondary Colors - Lighter in Dark Mode
//   "secondary": #9c27b0,
//   // Purple 500
//   "secondary-light": #ce93d8,
//   // Purple 200
//   "secondary-dark": #661D75,

//   //Terceary Colors - Lighter in Dark Mode
//   "terciary": #ffd191,
//   // Yellow 200
//   "terciary-light": #ffecb3,
//   // Yellow 50
//   "terciary-dark": #ffab40,

//   "page": #121212,

//   "surface": #1d1d1d,
//   "surface-light": #333333,
//   "surface-dark": #121212,

//   "text": #ffffff,

//   // Black Background
//   // Status Colors - Adjusted for Dark Mode
//   "success": #66bb6a,
//   // Green 400
//   "success-light": #81c784,
//   // Green 300
//   "success-dark": #388e3c,

//   // Green 700
//   "error": #f44336,
//   // Red 500
//   "error-light": #e57373,
//   // Red 300
//   "error-dark": #d32f2f,

//   // Red 700
//   "warning": #ffa726,
//   // Orange 400
//   "warning-light": #ffb74d,
//   // Orange 300
//   "warning-dark": #f57c00,

//   // Orange 700
//   "info": #29b6f6,
//   // Light Blue 400
//   "info-light": #4fc3f7,
//   // Light Blue 300
//   "info-dark": #0288d1 // Light Blue 700
// );

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