/* Class Application CSS Variables */
/* Modern CSS custom properties to replace SASS variables */

:root {
  /* CLASS Brand Colors */
  --class-red: #C75454;
  --class-blue: #6A6E8F;
  --class-dark-blue: #425668;
  --class-green: #4C9B5E;
  --class-yellow: #EDA707;
  --class-bg-blue: #6A6E8F;
  --class-light-blue: #a8e0ec;
  --class-lightest-blue: rgba(138, 221, 236, 0.39);
  --class-light: #f8f9fa;
  --class-dark: #343a40;

  /* Base Colors */
  --white: #ffffff;
  --black: #000000;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  /* Theme Colors (Bootstrap 5 compatible) */
  --bs-primary: var(--class-blue);
  --bs-success: var(--class-green);
  --bs-danger: var(--class-red);
  --bs-warning: var(--class-yellow);

  /* Component State Colors */
  --btn-disabled-bg: var(--gray-200);
  --btn-disabled-border: var(--gray-300);
  --btn-disabled-color: var(--gray-600);

  /* Layout Dimensions */
  --sidenav-base-width: 225px;
  --topnav-base-height: 56px;

  /* component borders */
  --bs-border-color: var(--gray-500);
    
  /* Z-index Variables */
  --z-content: 1037;
  --z-sidenav: 1038;
  --z-topnav: 1039;
}