/* Business OS Base Styles - Typography, Spacing, and Visual Consistency */

/* Typography Scale */
.text-xs { font-size: var(--theme-font-size-xs); line-height: var(--theme-line-height-tight); }
.text-sm { font-size: var(--theme-font-size-sm); line-height: var(--theme-line-height-base); }
.text-base { font-size: var(--theme-font-size-base); line-height: var(--theme-line-height-base); }
.text-lg { font-size: var(--theme-font-size-lg); line-height: var(--theme-line-height-base); }
.text-xl { font-size: var(--theme-font-size-xl); line-height: var(--theme-line-height-tight); }
.text-2xl { font-size: var(--theme-font-size-2xl); line-height: var(--theme-line-height-tight); }
.text-3xl { font-size: var(--theme-font-size-3xl); line-height: var(--theme-line-height-tight); }

/* Font Weights */
.font-normal { font-weight: var(--theme-font-weight-normal); }
.font-medium { font-weight: var(--theme-font-weight-medium); }
.font-semibold { font-weight: var(--theme-font-weight-semibold); }
.font-bold { font-weight: var(--theme-font-weight-bold); }

/* Line Heights */
.leading-tight { line-height: var(--theme-line-height-tight); }
.leading-base { line-height: var(--theme-line-height-base); }
.leading-relaxed { line-height: var(--theme-line-height-relaxed); }

/* Headings with Consistent Hierarchy */
.heading-1 {
    font-size: var(--theme-font-size-3xl);
    font-weight: var(--theme-font-weight-bold);
    line-height: var(--theme-line-height-tight);
    color: var(--theme-text-primary);
    margin-bottom: var(--theme-spacing-lg);
}

.heading-2 {
    font-size: var(--theme-font-size-2xl);
    font-weight: var(--theme-font-weight-semibold);
    line-height: var(--theme-line-height-tight);
    color: var(--theme-text-primary);
    margin-bottom: var(--theme-spacing-md);
}

.heading-3 {
    font-size: var(--theme-font-size-xl);
    font-weight: var(--theme-font-weight-semibold);
    line-height: var(--theme-line-height-base);
    color: var(--theme-text-primary);
    margin-bottom: var(--theme-spacing-base);
}

.heading-4 {
    font-size: var(--theme-font-size-lg);
    font-weight: var(--theme-font-weight-medium);
    line-height: var(--theme-line-height-base);
    color: var(--theme-text-primary);
    margin-bottom: var(--theme-spacing-base);
}

.heading-5 {
    font-size: var(--theme-font-size-base);
    font-weight: var(--theme-font-weight-semibold);
    line-height: var(--theme-line-height-base);
    color: var(--theme-text-primary);
    margin-bottom: var(--theme-spacing-sm);
}

.heading-6 {
    font-size: var(--theme-font-size-sm);
    font-weight: var(--theme-font-weight-semibold);
    line-height: var(--theme-line-height-base);
    color: var(--theme-text-secondary);
    margin-bottom: var(--theme-spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Spacing System - Compact Design for Power Users */

/* Margin Utilities */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--theme-spacing-xs) !important; }
.m-sm { margin: var(--theme-spacing-sm) !important; }
.m-base { margin: var(--theme-spacing-base) !important; }
.m-md { margin: var(--theme-spacing-md) !important; }
.m-lg { margin: var(--theme-spacing-lg) !important; }
.m-xl { margin: var(--theme-spacing-xl) !important; }
.m-2xl { margin: var(--theme-spacing-2xl) !important; }

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--theme-spacing-xs) !important; }
.mt-sm { margin-top: var(--theme-spacing-sm) !important; }
.mt-base { margin-top: var(--theme-spacing-base) !important; }
.mt-md { margin-top: var(--theme-spacing-md) !important; }
.mt-lg { margin-top: var(--theme-spacing-lg) !important; }
.mt-xl { margin-top: var(--theme-spacing-xl) !important; }
.mt-2xl { margin-top: var(--theme-spacing-2xl) !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--theme-spacing-xs) !important; }
.mb-sm { margin-bottom: var(--theme-spacing-sm) !important; }
.mb-base { margin-bottom: var(--theme-spacing-base) !important; }
.mb-md { margin-bottom: var(--theme-spacing-md) !important; }
.mb-lg { margin-bottom: var(--theme-spacing-lg) !important; }
.mb-xl { margin-bottom: var(--theme-spacing-xl) !important; }
.mb-2xl { margin-bottom: var(--theme-spacing-2xl) !important; }

/* Margin Left */
.ml-0 { margin-left: 0 !important; }
.ml-xs { margin-left: var(--theme-spacing-xs) !important; }
.ml-sm { margin-left: var(--theme-spacing-sm) !important; }
.ml-base { margin-left: var(--theme-spacing-base) !important; }
.ml-md { margin-left: var(--theme-spacing-md) !important; }
.ml-lg { margin-left: var(--theme-spacing-lg) !important; }
.ml-xl { margin-left: var(--theme-spacing-xl) !important; }
.ml-2xl { margin-left: var(--theme-spacing-2xl) !important; }

/* Margin Right */
.mr-0 { margin-right: 0 !important; }
.mr-xs { margin-right: var(--theme-spacing-xs) !important; }
.mr-sm { margin-right: var(--theme-spacing-sm) !important; }
.mr-base { margin-right: var(--theme-spacing-base) !important; }
.mr-md { margin-right: var(--theme-spacing-md) !important; }
.mr-lg { margin-right: var(--theme-spacing-lg) !important; }
.mr-xl { margin-right: var(--theme-spacing-xl) !important; }
.mr-2xl { margin-right: var(--theme-spacing-2xl) !important; }

/* Margin X (horizontal) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xs { margin-left: var(--theme-spacing-xs) !important; margin-right: var(--theme-spacing-xs) !important; }
.mx-sm { margin-left: var(--theme-spacing-sm) !important; margin-right: var(--theme-spacing-sm) !important; }
.mx-base { margin-left: var(--theme-spacing-base) !important; margin-right: var(--theme-spacing-base) !important; }
.mx-md { margin-left: var(--theme-spacing-md) !important; margin-right: var(--theme-spacing-md) !important; }
.mx-lg { margin-left: var(--theme-spacing-lg) !important; margin-right: var(--theme-spacing-lg) !important; }
.mx-xl { margin-left: var(--theme-spacing-xl) !important; margin-right: var(--theme-spacing-xl) !important; }
.mx-2xl { margin-left: var(--theme-spacing-2xl) !important; margin-right: var(--theme-spacing-2xl) !important; }

/* Margin Y (vertical) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xs { margin-top: var(--theme-spacing-xs) !important; margin-bottom: var(--theme-spacing-xs) !important; }
.my-sm { margin-top: var(--theme-spacing-sm) !important; margin-bottom: var(--theme-spacing-sm) !important; }
.my-base { margin-top: var(--theme-spacing-base) !important; margin-bottom: var(--theme-spacing-base) !important; }
.my-md { margin-top: var(--theme-spacing-md) !important; margin-bottom: var(--theme-spacing-md) !important; }
.my-lg { margin-top: var(--theme-spacing-lg) !important; margin-bottom: var(--theme-spacing-lg) !important; }
.my-xl { margin-top: var(--theme-spacing-xl) !important; margin-bottom: var(--theme-spacing-xl) !important; }
.my-2xl { margin-top: var(--theme-spacing-2xl) !important; margin-bottom: var(--theme-spacing-2xl) !important; }

/* Padding Utilities */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--theme-spacing-xs) !important; }
.p-sm { padding: var(--theme-spacing-sm) !important; }
.p-base { padding: var(--theme-spacing-base) !important; }
.p-md { padding: var(--theme-spacing-md) !important; }
.p-lg { padding: var(--theme-spacing-lg) !important; }
.p-xl { padding: var(--theme-spacing-xl) !important; }
.p-2xl { padding: var(--theme-spacing-2xl) !important; }

/* Padding Top */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--theme-spacing-xs) !important; }
.pt-sm { padding-top: var(--theme-spacing-sm) !important; }
.pt-base { padding-top: var(--theme-spacing-base) !important; }
.pt-md { padding-top: var(--theme-spacing-md) !important; }
.pt-lg { padding-top: var(--theme-spacing-lg) !important; }
.pt-xl { padding-top: var(--theme-spacing-xl) !important; }
.pt-2xl { padding-top: var(--theme-spacing-2xl) !important; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--theme-spacing-xs) !important; }
.pb-sm { padding-bottom: var(--theme-spacing-sm) !important; }
.pb-base { padding-bottom: var(--theme-spacing-base) !important; }
.pb-md { padding-bottom: var(--theme-spacing-md) !important; }
.pb-lg { padding-bottom: var(--theme-spacing-lg) !important; }
.pb-xl { padding-bottom: var(--theme-spacing-xl) !important; }
.pb-2xl { padding-bottom: var(--theme-spacing-2xl) !important; }

/* Padding Left */
.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--theme-spacing-xs) !important; }
.pl-sm { padding-left: var(--theme-spacing-sm) !important; }
.pl-base { padding-left: var(--theme-spacing-base) !important; }
.pl-md { padding-left: var(--theme-spacing-md) !important; }
.pl-lg { padding-left: var(--theme-spacing-lg) !important; }
.pl-xl { padding-left: var(--theme-spacing-xl) !important; }
.pl-2xl { padding-left: var(--theme-spacing-2xl) !important; }

/* Padding Right */
.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--theme-spacing-xs) !important; }
.pr-sm { padding-right: var(--theme-spacing-sm) !important; }
.pr-base { padding-right: var(--theme-spacing-base) !important; }
.pr-md { padding-right: var(--theme-spacing-md) !important; }
.pr-lg { padding-right: var(--theme-spacing-lg) !important; }
.pr-xl { padding-right: var(--theme-spacing-xl) !important; }
.pr-2xl { padding-right: var(--theme-spacing-2xl) !important; }

/* Padding X (horizontal) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--theme-spacing-xs) !important; padding-right: var(--theme-spacing-xs) !important; }
.px-sm { padding-left: var(--theme-spacing-sm) !important; padding-right: var(--theme-spacing-sm) !important; }
.px-base { padding-left: var(--theme-spacing-base) !important; padding-right: var(--theme-spacing-base) !important; }
.px-md { padding-left: var(--theme-spacing-md) !important; padding-right: var(--theme-spacing-md) !important; }
.px-lg { padding-left: var(--theme-spacing-lg) !important; padding-right: var(--theme-spacing-lg) !important; }
.px-xl { padding-left: var(--theme-spacing-xl) !important; padding-right: var(--theme-spacing-xl) !important; }
.px-2xl { padding-left: var(--theme-spacing-2xl) !important; padding-right: var(--theme-spacing-2xl) !important; }

/* Padding Y (vertical) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--theme-spacing-xs) !important; padding-bottom: var(--theme-spacing-xs) !important; }
.py-sm { padding-top: var(--theme-spacing-sm) !important; padding-bottom: var(--theme-spacing-sm) !important; }
.py-base { padding-top: var(--theme-spacing-base) !important; padding-bottom: var(--theme-spacing-base) !important; }
.py-md { padding-top: var(--theme-spacing-md) !important; padding-bottom: var(--theme-spacing-md) !important; }
.py-lg { padding-top: var(--theme-spacing-lg) !important; padding-bottom: var(--theme-spacing-lg) !important; }
.py-xl { padding-top: var(--theme-spacing-xl) !important; padding-bottom: var(--theme-spacing-xl) !important; }
.py-2xl { padding-top: var(--theme-spacing-2xl) !important; padding-bottom: var(--theme-spacing-2xl) !important; }

/* Gap Utilities for Flexbox and Grid */
.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--theme-spacing-xs) !important; }
.gap-sm { gap: var(--theme-spacing-sm) !important; }
.gap-base { gap: var(--theme-spacing-base) !important; }
.gap-md { gap: var(--theme-spacing-md) !important; }
.gap-lg { gap: var(--theme-spacing-lg) !important; }
.gap-xl { gap: var(--theme-spacing-xl) !important; }
.gap-2xl { gap: var(--theme-spacing-2xl) !important; }

/* Visual Consistency Classes */

/* Elevation and Shadows */
.elevation-0 { box-shadow: none !important; }
.elevation-1 { box-shadow: var(--theme-shadow-sm) !important; }
.elevation-2 { box-shadow: var(--theme-shadow) !important; }
.elevation-3 { box-shadow: var(--theme-shadow-lg) !important; }
.elevation-4 { box-shadow: var(--theme-shadow-xl) !important; }

/* Border Radius */
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--theme-border-radius-sm) !important; }
.rounded { border-radius: var(--theme-border-radius) !important; }
.rounded-lg { border-radius: var(--theme-border-radius-lg) !important; }
.rounded-xl { border-radius: var(--theme-border-radius-xl) !important; }
.rounded-full { border-radius: 9999px !important; }

/* Border Utilities */
.border-0 { border: 0 !important; }
.border { border: 1px solid var(--theme-border) !important; }
.border-2 { border: 2px solid var(--theme-border) !important; }
.border-primary { border-color: var(--theme-primary) !important; }
.border-success { border-color: var(--theme-success) !important; }
.border-warning { border-color: var(--theme-warning) !important; }
.border-error { border-color: var(--theme-error) !important; }

/* Background Colors */
.bg-transparent { background-color: transparent !important; }
.bg-primary { background-color: var(--theme-primary) !important; color: var(--theme-text-inverse) !important; }
.bg-primary-light { background-color: var(--theme-primary-light) !important; color: var(--theme-primary-dark) !important; }
.bg-success { background-color: var(--theme-success) !important; color: var(--theme-text-inverse) !important; }
.bg-success-light { background-color: var(--theme-success-light) !important; color: var(--theme-success-hover) !important; }
.bg-warning { background-color: var(--theme-warning) !important; color: var(--theme-text-primary) !important; }
.bg-warning-light { background-color: var(--theme-warning-light) !important; color: var(--theme-warning-hover) !important; }
.bg-error { background-color: var(--theme-error) !important; color: var(--theme-text-inverse) !important; }
.bg-error-light { background-color: var(--theme-error-light) !important; color: var(--theme-error-hover) !important; }
.bg-surface { background-color: var(--theme-surface) !important; }
.bg-surface-hover { background-color: var(--theme-surface-hover) !important; }
.bg-background { background-color: var(--theme-background) !important; }

/* Text Colors */
.text-primary { color: var(--theme-primary) !important; }
.text-success { color: var(--theme-success) !important; }
.text-warning { color: var(--theme-warning) !important; }
.text-error { color: var(--theme-error) !important; }
.text-info { color: var(--theme-info) !important; }
.text-primary-theme { color: var(--theme-text-primary) !important; }
.text-secondary-theme { color: var(--theme-text-secondary) !important; }
.text-muted-theme { color: var(--theme-text-muted) !important; }
.text-inverse { color: var(--theme-text-inverse) !important; }

/* Layout Utilities */
.container-compact {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--theme-spacing-base);
}

.container-comfortable {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--theme-spacing-lg);
}

/* Flexbox Utilities */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.flex-row { flex-direction: row !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: none !important; }

/* Grid Utilities */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

/* Position Utilities */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }

/* Display Utilities */
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.inline { display: inline !important; }
.hidden { display: none !important; }

/* Overflow Utilities */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* Transition Utilities */
.transition-fast { transition: all var(--theme-transition-fast) !important; }
.transition { transition: all var(--theme-transition-base) !important; }
.transition-slow { transition: all var(--theme-transition-slow) !important; }
.transition-none { transition: none !important; }

/* Hover Effects */
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-lg);
    transition: all var(--theme-transition-fast);
}

.hover-scale:hover {
    transform: scale(1.02);
    transition: all var(--theme-transition-fast);
}

.hover-primary:hover {
    color: var(--theme-primary);
    transition: color var(--theme-transition-fast);
}

/* Focus Utilities */
.focus-ring:focus {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

.focus-ring-inset:focus {
    outline: 2px solid var(--theme-primary);
    outline-offset: -2px;
}

/* 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: 0;
}

/* Print Utilities */
@media print {
    .print-hidden { display: none !important; }
    .print-block { display: block !important; }
    .print-inline { display: inline !important; }
    .print-inline-block { display: inline-block !important; }
}