/* Color System - CSS Custom Properties */
/* Light Theme */
:root {
  /* Dark Blue Colors (deprecated - use contextual names) */
  --custom-darkblue: #ffffff;
  --custom-darkblue-2: #f9f7fc;
  --custom-darkblue-3: #eee8f5;
  --custom-darkblue-4: #e3d9f0;

  /* Slate Colors (deprecated - use contextual names) */
  --custom-slate: #f5f3f8;
  --custom-slate-2: #eee8f5;
  --custom-slate-3: #d9cce8;

  /* Card/Surface Colors (contextual) */
  --custom-card-background: #ffffff;
  --custom-card-background-hover: #f9f7fc;
  --custom-card-background-secondary: #eee8f5;
  --custom-card-background-tertiary: #e3d9f0;

  /* Page/Layout Colors (contextual) */
  --custom-page-background: #f5f3f8;
  --custom-page-background-secondary: #f5f3f8;

  /* Border Colors (contextual) */
  --custom-border-color: #eee8f5;
  --custom-border-color-secondary: #d9cce8;

  /* Form Field Colors (contextual) */
  --custom-input-background: #ffffff;
  --custom-input-border: #d9cce8;
  --custom-input-border-focused: #06b6d4;

  /* Drawer Colors (contextual) */
  --custom-drawer-background: rgba(255, 255, 255, 0.95);
  --custom-drawer-background-secondary: rgba(238, 232, 245, 0.95);

  /* Brand Colors */
  --custom-brand-primary: #5c3c8f;
  --custom-brand-secondary: #eee8f5;

  /* Cyan/Blue Colors */
  --custom-cyan: #06b6d4;
  --custom-cyan-2: #0891b2;
  --custom-cyan-3: #0e7490;
  --custom-cyan-4: #155e75;
  --custom-cyan-5: #164e63;

  /* Text Colors */
  --custom-text-primary: #0f172a;
  --custom-text-secondary: #1e293b;
  --custom-text-tertiary: #475569;
  --custom-text-quaternary: #64748b;

  /* Green Colors */
  --custom-green: #34d399;
  --custom-green-2: #10b981;

  /* Red Colors */
  --custom-red: #f87171;
  --custom-red-2: #ef4444;

  /* Yellow Colors */
  --custom-yellow: #fbbf24;
  --custom-yellow-2: #f59e0b;

  /* White */
  --custom-white: #ffffff;

  /* Header Background */
  --custom-header-background: rgba(26, 20, 37, 0.85);

  /* Page Background */
  --custom-page-background: #f5f3f8;

  /* RGBA Variables for Translucent Colors (deprecated - use contextual names) */
  --custom-darkblue-translucent: rgba(255, 255, 255, 0.95);
  --custom-darkblue-translucent-2: rgba(238, 232, 245, 0.95);
  --custom-darkblue-translucent-3: rgba(227, 217, 240, 0.95);
  --custom-darkblue-translucent-4: rgba(255, 255, 255, 0.98);
  --custom-darkblue-translucent-5: rgba(255, 255, 255, 0.8);
  --custom-slate-translucent: rgba(245, 243, 248, 0.4);
  --custom-slate-translucent-2: rgba(245, 243, 248, 0.6);

  /* Card/Surface Translucent Colors (contextual) */
  --custom-card-background-translucent: rgba(255, 255, 255, 0.95);
  --custom-card-background-translucent-2: rgba(238, 232, 245, 0.95);
  --custom-card-background-translucent-3: rgba(227, 217, 240, 0.95);
  --custom-card-background-translucent-4: rgba(255, 255, 255, 0.98);
  --custom-card-background-translucent-5: rgba(255, 255, 255, 0.8);
  --custom-card-background-translucent-6: rgba(255, 255, 255, 0.5);
  --custom-card-background-hover-translucent: rgba(249, 247, 252, 0.95);

  /* Page/Layout Translucent Colors (contextual) */
  --custom-page-background-translucent: rgba(245, 243, 248, 0.4);
  --custom-page-background-translucent-2: rgba(245, 243, 248, 0.6);

  /* Border Translucent Colors (contextual) */
  --custom-border-color-translucent: rgba(238, 232, 245, 0.2);
  --custom-border-color-translucent-2: rgba(217, 204, 232, 0.1);
  /* Brand Primary Translucent */
  --custom-brand-primary-translucent: rgba(92, 60, 143, 0.1);
  --custom-brand-primary-translucent-2: rgba(92, 60, 143, 0.15);
  --custom-brand-primary-translucent-3: rgba(92, 60, 143, 0.2);
  --custom-brand-primary-translucent-4: rgba(92, 60, 143, 0.3);
  --custom-brand-primary-translucent-5: rgba(92, 60, 143, 0.05);
  --custom-brand-primary-translucent-6: rgba(92, 60, 143, 0.5);
  --custom-cyan-translucent: rgba(6, 182, 212, 0.1);
  --custom-cyan-translucent-2: rgba(6, 182, 212, 0.15);
  --custom-cyan-translucent-3: rgba(6, 182, 212, 0.2);
  --custom-cyan-translucent-4: rgba(6, 182, 212, 0.3);
  --custom-cyan-translucent-5: rgba(6, 182, 212, 0.05);
  --custom-cyan-translucent-6: rgba(6, 182, 212, 0.5);
  --custom-cyan-2-translucent: rgba(8, 145, 178, 0.3);
  --custom-cyan-3-translucent: rgba(14, 116, 144, 0.3);
  --custom-cyan-4-translucent: rgba(21, 94, 117, 0.3);
  --custom-green-translucent: rgba(52, 211, 153, 0.1);
  --custom-green-translucent-2: rgba(52, 211, 153, 0.2);
  --custom-green-translucent-3: rgba(52, 211, 153, 0.3);
  --custom-green-translucent-4: rgba(52, 211, 153, 0.05);
  --custom-green-2-translucent: rgba(16, 185, 129, 0.3);
  --custom-red-translucent: rgba(248, 113, 113, 0.1);
  --custom-red-translucent-2: rgba(248, 113, 113, 0.2);
  --custom-red-2-translucent: rgba(239, 68, 68, 0.1);
  --custom-yellow-translucent: rgba(251, 191, 36, 0.2);
  --custom-yellow-2-translucent: rgba(245, 158, 11, 0.1);
  --custom-white-translucent: rgba(255, 255, 255, 0.08);
  --custom-white-translucent-2: rgba(255, 255, 255, 0.4);
  --custom-white-translucent-3: rgba(255, 255, 255, 0.7);
  --custom-darkblue-translucent-6: rgba(255, 255, 255, 0.5);
  /* Brand Primary Border Translucent */
  --custom-brand-primary-border-translucent: rgba(92, 60, 143, 0.1);
  --custom-brand-primary-border-translucent-2: rgba(92, 60, 143, 0.15);
  --custom-brand-primary-border-translucent-3: rgba(92, 60, 143, 0.2);
  --custom-cyan-border-translucent: rgba(6, 182, 212, 0.1);
  --custom-cyan-border-translucent-2: rgba(6, 182, 212, 0.2);
  --custom-cyan-border-translucent-3: rgba(6, 182, 212, 0.3);
  --custom-cyan-2-border-translucent: rgba(8, 145, 178, 0.3);
  --custom-cyan-3-border-translucent: rgba(14, 116, 144, 0.3);
  --custom-cyan-4-border-translucent: rgba(21, 94, 117, 0.3);
  --custom-cyan-5-translucent: rgba(22, 78, 99, 0.2);
  --custom-green-border-translucent: rgba(52, 211, 153, 0.3);
  --custom-green-2-border-translucent: rgba(16, 185, 129, 0.3);
  --custom-red-border-translucent: rgba(248, 113, 113, 0.3);
  --custom-slate-2-translucent: rgba(238, 232, 245, 0.2);
  --custom-slate-3-translucent: rgba(217, 204, 232, 0.1);
  --custom-red-2-translucent-2: rgba(239, 68, 68, 0.1);

  /* Header Background (contextual - already exists, keep for reference) */
  --custom-header-background: rgba(26, 20, 37, 0.85);

  /* Dialog/Modal Colors (contextual) */
  --custom-dialog-background: rgba(255, 255, 255, 0.98);
  --custom-dialog-border: rgba(6, 182, 212, 0.15);
  --custom-dialog-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Header Border Colors (contextual) */
  --custom-header-border: rgba(6, 182, 212, 0.15);
  --custom-header-gradient-start: rgba(26, 20, 37, 0.75);

  /* Text Colors on Dark Backgrounds (contextual) */
  --custom-text-on-dark-background: rgba(255, 255, 255, 0.9);
  --custom-text-on-dark-background-hover: #06b6d4;

  /* Button Colors (contextual) */
  --custom-button-primary-text: #ffffff;
  --custom-button-primary-text-hover: #ffffff;

  /* Shadow Colors (contextual) */
  --custom-shadow-light: rgba(0, 0, 0, 0.1);
  --custom-shadow-medium: rgba(0, 0, 0, 0.06);
  --custom-shadow-strong: rgba(0, 0, 0, 0.3);
  --custom-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --custom-shadow-dialog: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --custom-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

  /* Chart Colors (contextual) */
  --custom-chart-cyan-light: #9880c0;
  --custom-chart-cyan-very-light: #c9b8e0;

  /* Error Colors (contextual) */
  --custom-error-red: #f44336;
  --custom-error-red-light: #fa755a;

  /* Border Colors - Cyan Variants (contextual) */
  --custom-border-cyan-subtle: rgba(6, 182, 212, 0.08);
  --custom-border-cyan-light: rgba(6, 182, 212, 0.15);
  --custom-border-cyan-medium: rgba(6, 182, 212, 0.15);

  /* Social Media Brand Colors (contextual) */
  --custom-social-whatsapp: #25D366;
  --custom-social-telegram: #0088cc;
  --custom-social-messenger: #006AFF;
  --custom-social-instagram: #E4405F;

  /* Payment/Stripe Colors (contextual) */
  --custom-payment-text: #ffffff;
  --custom-payment-placeholder: #aab7c4;
  --custom-payment-error: #fa755a;

  /* Quasar Theme Colors (contextual) */
  --custom-quasar-primary: #5c3c8f;
  --custom-quasar-accent: #7a5ba8;
  --custom-quasar-dark: #0a0f1e;
}

/* Dark Theme */
body.body--dark {
  /* Dark Blue Colors (deprecated - use contextual names) */
  --custom-darkblue: #1a1425;
  --custom-darkblue-2: #120e1c;
  --custom-darkblue-3: #0d0a15;
  --custom-darkblue-4: #080612;

  /* Slate Colors (deprecated - use contextual names) */
  --custom-slate: #1a1425;
  --custom-slate-2: #4a4555;
  --custom-slate-3: #3a3545;

  /* Card/Surface Colors (contextual) */
  --custom-card-background: #1a1425;
  --custom-card-background-hover: #120e1c;
  --custom-card-background-secondary: #0d0a15;
  --custom-card-background-tertiary: #080612;

  /* Page/Layout Colors (contextual) */
  --custom-page-background: #0d0a15;
  --custom-page-background-secondary: #1a1425;

  /* Border Colors (contextual) */
  --custom-border-color: #4a4555;
  --custom-border-color-secondary: #3a3545;

  /* Form Field Colors (contextual) */
  --custom-input-background: #1a1425;
  --custom-input-border: #3a3545;
  --custom-input-border-focused: #7a5ba8;

  /* Drawer Colors (contextual) */
  --custom-drawer-background: rgba(26, 20, 37, 0.95);
  --custom-drawer-background-secondary: rgba(13, 10, 21, 0.95);

  /* Brand Colors */
  --custom-brand-primary: #7a5ba8;
  --custom-brand-secondary: #eee8f5;

  /* Cyan/Blue Colors */
  --custom-cyan: #06b6d4;
  --custom-cyan-2: #0891b2;
  --custom-cyan-3: #0e7490;
  --custom-cyan-4: #155e75;
  --custom-cyan-5: #164e63;

  /* Text Colors */
  --custom-text-primary: #ffffff;
  --custom-text-secondary: #e2e8f0;
  --custom-text-tertiary: #94a3b8;
  --custom-text-quaternary: #64748b;

  /* Green Colors */
  --custom-green: #34d399;
  --custom-green-2: #10b981;

  /* Red Colors */
  --custom-red: #f87171;
  --custom-red-2: #ef4444;

  /* Yellow Colors */
  --custom-yellow: #fbbf24;
  --custom-yellow-2: #f59e0b;

  /* White */
  --custom-white: #ffffff;

  /* Header Background */
  --custom-header-background: rgba(26, 20, 37, 0.95);

  /* Page Background */
  --custom-page-background: #0d0a15;

  /* RGBA Variables for Translucent Colors (deprecated - use contextual names) */
  --custom-darkblue-translucent: rgba(26, 20, 37, 0.95);
  --custom-darkblue-translucent-2: rgba(13, 10, 21, 0.95);
  --custom-darkblue-translucent-3: rgba(8, 6, 18, 0.95);
  --custom-darkblue-translucent-4: rgba(26, 20, 37, 0.98);
  --custom-darkblue-translucent-5: rgba(26, 20, 37, 0.8);
  --custom-slate-translucent: rgba(26, 20, 37, 0.4);
  --custom-slate-translucent-2: rgba(26, 20, 37, 0.6);

  /* Card/Surface Translucent Colors (contextual) */
  --custom-card-background-translucent: rgba(26, 20, 37, 0.95);
  --custom-card-background-translucent-2: rgba(13, 10, 21, 0.95);
  --custom-card-background-translucent-3: rgba(8, 6, 18, 0.95);
  --custom-card-background-translucent-4: rgba(18, 14, 28, 0.98);
  --custom-card-background-translucent-5: rgba(18, 14, 28, 0.8);
  --custom-card-background-translucent-6: rgba(26, 20, 37, 0.5);
  --custom-card-background-hover-translucent: rgba(18, 14, 28, 0.95);

  /* Page/Layout Translucent Colors (contextual) */
  --custom-page-background-translucent: rgba(26, 20, 37, 0.4);
  --custom-page-background-translucent-2: rgba(26, 20, 37, 0.6);

  /* Border Translucent Colors (contextual) */
  --custom-border-color-translucent: rgba(74, 69, 85, 0.2);
  --custom-border-color-translucent-2: rgba(58, 53, 69, 0.1);
  /* Brand Primary Translucent */
  --custom-brand-primary-translucent: rgba(92, 60, 143, 0.1);
  --custom-brand-primary-translucent-2: rgba(92, 60, 143, 0.15);
  --custom-brand-primary-translucent-3: rgba(92, 60, 143, 0.2);
  --custom-brand-primary-translucent-4: rgba(92, 60, 143, 0.3);
  --custom-brand-primary-translucent-5: rgba(92, 60, 143, 0.05);
  --custom-brand-primary-translucent-6: rgba(92, 60, 143, 0.5);
  --custom-cyan-translucent: rgba(6, 182, 212, 0.1);
  --custom-cyan-translucent-2: rgba(6, 182, 212, 0.15);
  --custom-cyan-translucent-3: rgba(6, 182, 212, 0.2);
  --custom-cyan-translucent-4: rgba(6, 182, 212, 0.3);
  --custom-cyan-translucent-5: rgba(6, 182, 212, 0.05);
  --custom-cyan-translucent-6: rgba(6, 182, 212, 0.5);
  --custom-cyan-2-translucent: rgba(8, 145, 178, 0.3);
  --custom-cyan-3-translucent: rgba(14, 116, 144, 0.3);
  --custom-cyan-4-translucent: rgba(21, 94, 117, 0.3);
  --custom-green-translucent: rgba(52, 211, 153, 0.1);
  --custom-green-translucent-2: rgba(52, 211, 153, 0.2);
  --custom-green-translucent-3: rgba(52, 211, 153, 0.3);
  --custom-green-translucent-4: rgba(52, 211, 153, 0.05);
  --custom-green-2-translucent: rgba(16, 185, 129, 0.3);
  --custom-red-translucent: rgba(248, 113, 113, 0.1);
  --custom-red-translucent-2: rgba(248, 113, 113, 0.2);
  --custom-red-2-translucent: rgba(239, 68, 68, 0.1);
  --custom-yellow-translucent: rgba(251, 191, 36, 0.2);
  --custom-yellow-2-translucent: rgba(245, 158, 11, 0.1);
  --custom-white-translucent: rgba(255, 255, 255, 0.08);
  --custom-white-translucent-2: rgba(255, 255, 255, 0.4);
  --custom-white-translucent-3: rgba(255, 255, 255, 0.7);
  --custom-darkblue-translucent-6: rgba(26, 20, 37, 0.5);
  /* Brand Primary Border Translucent */
  --custom-brand-primary-border-translucent: rgba(92, 60, 143, 0.1);
  --custom-brand-primary-border-translucent-2: rgba(92, 60, 143, 0.15);
  --custom-brand-primary-border-translucent-3: rgba(92, 60, 143, 0.2);
  --custom-cyan-border-translucent: rgba(18, 14, 28, 0.2);
  --custom-cyan-border-translucent-2: rgba(18, 14, 28, 0.3);
  --custom-cyan-border-translucent-3: rgba(18, 14, 28, 0.05);
  --custom-cyan-2-border-translucent: rgba(8, 145, 178, 0.3);
  --custom-cyan-3-border-translucent: rgba(14, 116, 144, 0.3);
  --custom-cyan-4-border-translucent: rgba(21, 94, 117, 0.3);
  --custom-cyan-5-translucent: rgba(22, 78, 99, 0.2);
  --custom-green-border-translucent: rgba(52, 211, 153, 0.3);
  --custom-green-2-border-translucent: rgba(16, 185, 129, 0.3);
  --custom-red-border-translucent: rgba(248, 113, 113, 0.3);
  --custom-slate-2-translucent: rgba(74, 69, 85, 0.2);
  --custom-slate-3-translucent: rgba(58, 53, 69, 0.1);
  --custom-red-2-translucent-2: rgba(239, 68, 68, 0.1);

  /* Header Background (contextual - already exists, keep for reference) */
  --custom-header-background: rgba(26, 20, 37, 0.95);

  /* Dialog/Modal Colors (contextual) */
  --custom-dialog-background: rgba(26, 20, 37, 0.98);
  --custom-dialog-border: rgba(6, 182, 212, 0.15);
  --custom-dialog-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Header Border Colors (contextual) */
  --custom-header-border: rgba(18, 14, 28, 0.2);
  --custom-header-gradient-start: rgba(26, 20, 37, 0.75);

  /* Text Colors on Dark Backgrounds (contextual) */
  --custom-text-on-dark-background: rgba(255, 255, 255, 0.9);
  --custom-text-on-dark-background-hover: #06b6d4;

  /* Button Colors (contextual) */
  --custom-button-primary-text: #ffffff;
  --custom-button-primary-text-hover: #ffffff;

  /* Shadow Colors (contextual) */
  --custom-shadow-light: rgba(0, 0, 0, 0.1);
  --custom-shadow-medium: rgba(0, 0, 0, 0.06);
  --custom-shadow-strong: rgba(0, 0, 0, 0.3);
  --custom-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --custom-shadow-dialog: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --custom-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

  /* Chart Colors (contextual) */
  --custom-chart-cyan-light: #9880c0;
  --custom-chart-cyan-very-light: #c9b8e0;

  /* Error Colors (contextual) */
  --custom-error-red: #f44336;
  --custom-error-red-light: #fa755a;

  /* Border Colors - Cyan Variants (contextual) */
  --custom-border-cyan-subtle: rgba(6, 182, 212, 0.08);
  --custom-border-cyan-light: rgba(6, 182, 212, 0.15);
  --custom-border-cyan-medium: rgba(6, 182, 212, 0.15);

  /* Social Media Brand Colors (contextual) */
  --custom-social-whatsapp: #25D366;
  --custom-social-telegram: #0088cc;
  --custom-social-messenger: #006AFF;
  --custom-social-instagram: #E4405F;

  /* Payment/Stripe Colors (contextual) */
  --custom-payment-text: #ffffff;
  --custom-payment-placeholder: #aab7c4;
  --custom-payment-error: #fa755a;

  /* Quasar Theme Colors (contextual) */
  --custom-quasar-primary: #5c3c8f;
  --custom-quasar-accent: #7a5ba8;
  --custom-quasar-dark: #0a0f1e;
}