/**
 * OpticMI Design Tokens
 * Generated from design-system.json
 * Bootstrap 5.3.3 + AdminLTE 3.2
 * Version: 1.0.0
 * Last Updated: 2025-11-15
 */

:root {
  /* ========================================
     COLORS
     ======================================== */

  /* Bootstrap Semantic Colors */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-dark: #343a40;
  --color-light: #f8f9fa;

  /* OpticMI Brand Colors */
  --color-opticmi-purple: #593196;
  --color-opticmi-teal: #4AB8B6;
  --color-opticmi-dark-blue: #1D3143;
  --color-opticmi-green: #499E1E;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Gray Scale */
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  --font-family-base: 'Source Sans Pro', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Font Sizes */
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-large: 1.25rem;

  /* Heading Sizes */
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1rem;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-base: 1.5;

  /* ========================================
     SPACING
     ======================================== */

  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 1rem;
  --spacing-4: 1.5rem;
  --spacing-5: 3rem;

  /* ========================================
     LAYOUT
     ======================================== */

  --sidebar-width: 250px;
  --sidebar-width-collapsed: 4.6rem;
  --header-height: 57px;
  --content-padding: 1rem;
  --card-body-padding: 1.25rem;
  --form-group-margin: 1rem;

  /* ========================================
     BORDERS
     ======================================== */

  --border-radius: 0.25rem;
  --border-radius-large: 0.3rem;
  --border-radius-small: 0.2rem;
  --border-width: 1px;
  --border-color: #dee2e6;

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-small: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  --shadow-medium: 0 3px 6px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.12);
  --shadow-large: 0 10px 20px rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.10);
  --shadow-card: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);

  /* ========================================
     BREAKPOINTS (for reference in JavaScript)
     ======================================== */

  --breakpoint-xs: 0px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* ========================================
     Z-INDEX
     ======================================== */

  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;
  --transition-ease: ease-in-out;

  /* ========================================
     COMPONENTS
     ======================================== */

  /* Buttons */
  --button-padding-y: 0.375rem;
  --button-padding-x: 0.75rem;
  --button-font-size: 1rem;
  --button-border-radius: 0.25rem;
  --button-font-weight: 400;

  /* Cards */
  --card-padding: 1.25rem;
  --card-border-radius: 0.25rem;
  --card-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
  --card-header-bg: #ffffff;
  --card-header-padding: 0.75rem 1.25rem;

  /* Tables */
  --table-cell-padding: 0.75rem;
  --table-border-color: #dee2e6;
  --table-striped-bg: rgba(0,0,0,.05);
  --table-hover-bg: rgba(0,0,0,.075);

  /* Forms */
  --input-height: calc(1.5em + 0.75rem + 2px);
  --input-padding: 0.375rem 0.75rem;
  --input-border-radius: 0.25rem;
  --input-border-color: #ced4da;
  --input-focus-border-color: #80bdff;
  --input-focus-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
  --label-margin-bottom: 0.5rem;

  /* Navbar */
  --navbar-height: 57px;
  --navbar-padding: 0.5rem 1rem;

  /* Sidebar */
  --sidebar-bg-color: #343a40;
  --sidebar-text-color: #c2c7d0;
  --sidebar-link-active-bg: #593196;
  --sidebar-link-active-color: #ffffff;
  --sidebar-link-hover-bg: rgba(255,255,255,.1);

  /* ========================================
     ACCESSIBILITY
     ======================================== */

  --focus-outline-width: 0.2rem;
  --focus-outline-offset: 0.125rem;
  --focus-outline-color: rgba(0,123,255,.25);
}

/* ========================================
   APPLY BASE STYLES
   ======================================== */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-gray-900);
  background-color: var(--color-gray-100);
}

/* ========================================
   OPTICMI BRAND UTILITY CLASSES
   ======================================== */

/* Background Colors */
.bg-opticmi-purple {
  background-color: var(--color-opticmi-purple) !important;
  color: var(--color-white) !important;
}

.bg-opticmi-teal {
  background-color: var(--color-opticmi-teal) !important;
  color: var(--color-white) !important;
}

.bg-opticmi-dark-blue {
  background-color: var(--color-opticmi-dark-blue) !important;
  color: var(--color-white) !important;
}

.bg-opticmi-green {
  background-color: var(--color-opticmi-green) !important;
  color: var(--color-white) !important;
}

/* Text Colors */
.text-opticmi-purple {
  color: var(--color-opticmi-purple) !important;
}

.text-opticmi-teal {
  color: var(--color-opticmi-teal) !important;
}

.text-opticmi-dark-blue {
  color: var(--color-opticmi-dark-blue) !important;
}

.text-opticmi-green {
  color: var(--color-opticmi-green) !important;
}

/* Border Colors */
.border-opticmi-purple {
  border-color: var(--color-opticmi-purple) !important;
}

.border-opticmi-teal {
  border-color: var(--color-opticmi-teal) !important;
}

/* ========================================
   OPTICMI BUTTON VARIANTS
   ======================================== */

.btn-opticmi-purple {
  color: var(--color-white);
  background-color: var(--color-opticmi-purple);
  border-color: var(--color-opticmi-purple);
}

.btn-opticmi-purple:hover {
  background-color: #47236e;
  border-color: #47236e;
  color: var(--color-white);
}

.btn-opticmi-purple:focus,
.btn-opticmi-purple.focus {
  box-shadow: 0 0 0 var(--focus-outline-width) rgba(89, 49, 150, 0.25);
}

.btn-opticmi-purple:active,
.btn-opticmi-purple.active {
  background-color: #3a1c5a;
  border-color: #3a1c5a;
}

.btn-opticmi-purple:disabled,
.btn-opticmi-purple.disabled {
  background-color: var(--color-opticmi-purple);
  border-color: var(--color-opticmi-purple);
  opacity: 0.65;
}

/* Teal Button */
.btn-opticmi-teal {
  color: var(--color-white);
  background-color: var(--color-opticmi-teal);
  border-color: var(--color-opticmi-teal);
}

.btn-opticmi-teal:hover {
  background-color: #3a9694;
  border-color: #3a9694;
  color: var(--color-white);
}

.btn-opticmi-teal:focus,
.btn-opticmi-teal.focus {
  box-shadow: 0 0 0 var(--focus-outline-width) rgba(74, 184, 182, 0.25);
}

/* Outline Variants */
.btn-outline-opticmi-purple {
  color: var(--color-opticmi-purple);
  border-color: var(--color-opticmi-purple);
  background-color: transparent;
}

.btn-outline-opticmi-purple:hover {
  color: var(--color-white);
  background-color: var(--color-opticmi-purple);
  border-color: var(--color-opticmi-purple);
}

/* ========================================
   ADDITIONAL UTILITY CLASSES
   ======================================== */

/* Spacing Extensions */
.mt-6 { margin-top: 4rem !important; }
.mb-6 { margin-bottom: 4rem !important; }
.pt-6 { padding-top: 4rem !important; }
.pb-6 { padding-bottom: 4rem !important; }

/* Text Truncation */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Shadow Utilities */
.shadow-sm-custom {
  box-shadow: var(--shadow-small) !important;
}

.shadow-md-custom {
  box-shadow: var(--shadow-medium) !important;
}

.shadow-lg-custom {
  box-shadow: var(--shadow-large) !important;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .no-print {
    display: none !important;
  }

  .sidebar,
  .main-header,
  .main-footer {
    display: none !important;
  }

  .content-wrapper {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
  }

  body {
    background-color: var(--color-white) !important;
  }
}