/* ============================================
   DISCONTINUITY FRAMEWORK DESIGN SYSTEM
   Main CSS Entry Point
   ============================================ */

@import url('./variables.css');
@import url('./components.css');
@import url('./layout.css');

/* UTILITY CLASSES */

/* Spacing Utilities */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }

/* Text Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.font-400 { font-weight: var(--font-weight-400); }
.font-500 { font-weight: var(--font-weight-500); }
.font-600 { font-weight: var(--font-weight-600); }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-primary { color: var(--color-primary); }
.text-navy { color: var(--color-navy); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-gray { color: var(--color-gray-400); }
.text-white { color: var(--color-white); }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Background Utilities */
.bg-white { background: var(--color-white); }
.bg-gray-50 { background: var(--color-gray-50); }
.bg-gray-100 { background: var(--color-gray-100); }
.bg-primary { background: var(--color-primary); }
.bg-success { background: var(--color-success-light); }
.bg-danger { background: var(--color-danger-light); }
.bg-warning { background: var(--color-warning-light); }

/* Border Utilities */
.border { border: 1px solid var(--color-gray-200); }
.border-t { border-top: 1px solid var(--color-gray-200); }
.border-b { border-bottom: 1px solid var(--color-gray-200); }
.border-primary { border-color: var(--color-primary); }

.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Display Utilities */
.hidden { display: none; }
.inline { display: inline; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.h-auto { height: auto; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* Transform */
.transform { transform: translateZ(0); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }

/* Transition */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* Print Styles */
@media print {
  .no-print { display: none; }
  
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  img {
    max-width: 100% !important;
  }
}

/* ACCESSIBILITY */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 8px;
  text-decoration: none;
  z-index: var(--z-modal);
}

.skip-link:focus {
  top: 0;
}

/* FOCUS STYLES */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* HIGH CONTRAST MODE */
@media (prefers-contrast: more) {
  :root {
    --color-gray-400: #5A6370;
  }
  
  .data-table tbody tr:hover {
    background: var(--color-gray-100);
  }
}