/* ===================================
   CliniqOne Brand Colors CSS Variables
   Epic #2272 - Rebranding Initiative
   ================================== */

:root {
  /* Primary Brand Colors */
  --cliniq-navy: #0E2A3A;
  --cliniq-teal: #16A7C6;
  --cliniq-azure: #0B6F8A;
  --cliniq-orange: #F59E0B;
  --cliniq-orange-light: #FBB03B;
  --cliniq-gray: #5E6D78;

  /* Neutral Colors */
  --cliniq-white: #FFFFFF;
  --cliniq-black: #000000;
  --cliniq-off-black: #1f1f1f;

  /* Status Colors */
  --cliniq-success: #4CAF50;
  --cliniq-warning: #FF9800;
  --cliniq-error: #F44336;
  --cliniq-info: #2196F3;

  /* Medication Status Colors */
  --cliniq-med-active: #4CAF50;
  --cliniq-med-pending: #FFEB3B;
  --cliniq-med-missed: #F44336;
  --cliniq-med-inactive: #9E9E9E;

  /* Grayscale Palette */
  --cliniq-gray-50: #F9FAFB;
  --cliniq-gray-100: #E1E1E1;
  --cliniq-gray-200: #C8C8C8;
  --cliniq-gray-300: #ACACAC;
  --cliniq-gray-400: #919191;
  --cliniq-gray-500: #6E6E6E;
  --cliniq-gray-600: #404040;
  --cliniq-gray-700: #333333;
  --cliniq-gray-800: #424242;
  --cliniq-gray-900: #212121;
  --cliniq-gray-950: #141414;

  /* Gradient Backgrounds */
  --cliniq-gradient-primary: linear-gradient(135deg, #16A7C6 0%, #0B6F8A 100%);
  --cliniq-gradient-dark: linear-gradient(135deg, #0E2A3A 0%, #0B6F8A 100%);
  --cliniq-gradient-warm: linear-gradient(135deg, #F59E0B 0%, #FBB03B 100%);
  --cliniq-gradient-navy-teal: linear-gradient(135deg, #0E2A3A 0%, #16A7C6 100%);

  /* MudBlazor Theme Mapping */
  --mud-palette-primary: #16A7C6;
  --mud-palette-primary-dark: #0B6F8A;
  --mud-palette-secondary: #0E2A3A;
  --mud-palette-tertiary: #F59E0B;
  --mud-palette-success: #4CAF50;
  --mud-palette-warning: #FF9800;
  --mud-palette-error: #F44336;
  --mud-palette-info: #2196F3;

  /* Background & Text Colors */
  --cliniq-bg-light: #FFFFFF;
  --cliniq-bg-dark: #1f1f1f;
  --cliniq-text-primary: #0E2A3A;
  --cliniq-text-secondary: #5E6D78;
  --cliniq-text-light: #FFFFFF;
  --cliniq-text-muted: #ACACAC;

  /* Borders & Shadows */
  --cliniq-border-color: #E1E1E1;
  --cliniq-border-color-dark: #404040;
  --cliniq-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --cliniq-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --cliniq-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --cliniq-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* WCAG Compliance - Text on Primary (Teal) */
  --cliniq-teal-on-light: #FFFFFF;  /* White text on teal background (contrast: 7.3:1) */
  --cliniq-teal-on-dark: #FFFFFF;   /* White text on teal background (contrast: 7.3:1) */

  /* WCAG Compliance - Text on Navy */
  --cliniq-navy-on-light: #FFFFFF;  /* White text on navy background (contrast: 10.5:1) */
  --cliniq-navy-on-dark: #FFFFFF;   /* White text on navy background (contrast: 10.5:1) */

  /* WCAG Compliance - Text on Orange */
  --cliniq-orange-on-light: #FFFFFF; /* White text on orange background (contrast: 5.5:1) */
  --cliniq-orange-on-dark: #FFFFFF;  /* White text on orange background (contrast: 5.5:1) */
}