/* ============================================================================ INDEX - MAIN CSS MANIFEST Single import point for all stylesheets. Load this file in HTML : Import order matters: 1. Design system (tokens) 2. Typography 3. Layout & structure 4. Components 5. Accessibility 6. Demo-specific (controls & panels) 7. Print styles Last Updated: 2025-12-16 ============================================================================ */ @import url('./design-system.css'); @import url('./typography.css'); @import url('./layout.css'); @import url('./components.css'); @import url('./accessibility.css'); @import url('./demo-common.css'); @import url('./demo-controls.css'); @import url('./demo-panels.css'); @import url('./print.css'); /* ============================================================================ Global utility classes (can be applied to any element) ============================================================================ */ .container-fluid { width: 100%; padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); margin-left: auto; margin-right: auto; } .row { display: flex; flex-wrap: wrap; margin-right: calc(var(--spacing-md) / 2 * -1); margin-left: calc(var(--spacing-md) / 2 * -1); } .col { flex-basis: 0; flex-grow: 1; max-width: 100%; padding-right: calc(var(--spacing-md) / 2); padding-left: calc(var(--spacing-md) / 2); } /* Display utilities */ .d-none { display: none; } .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-flex { display: flex; } .d-grid { display: grid; } /* Flexbox utilities */ .flex-row { flex-direction: row; } .flex-column { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .justify-content-start { justify-content: flex-start; } .justify-content-center { justify-content: center; } .justify-content-end { justify-content: flex-end; } .justify-content-between { justify-content: space-between; } .align-items-start { align-items: flex-start; } .align-items-center { align-items: center; } .align-items-end { align-items: flex-end; } .gap-1 { gap: var(--spacing-sm); } .gap-2 { gap: var(--spacing-md); } .gap-3 { gap: var(--spacing-lg); } .gap-4 { gap: var(--spacing-xl); } /* Width utilities */ .w-100 { width: 100%; } .w-auto { width: auto; } .h-100 { height: 100%; } .h-auto { height: auto; } .min-w-0 { min-width: 0; } /* Position utilities */ .position-static { position: static; } .position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-sticky { position: sticky; } /* Border utilities */ .border { border: 1px solid var(--color-border); } .border-0 { border: none; } .border-top { border-top: 1px solid var(--color-border); } .border-bottom { border-bottom: 1px solid var(--color-border); } .rounded { border-radius: var(--radius-md); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-lg { border-radius: var(--radius-lg); } /* Shadow utilities */ .shadow-none { box-shadow: none; } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } /* Background utilities */ .bg-light { background: var(--color-bg-light); } .bg-dark { background: var(--color-bg-dark); } .bg-primary { background: var(--color-primary); color: white; } .bg-success { background: var(--color-success); color: white; } .bg-info { background: var(--color-info); color: white; } .bg-warning { background: var(--color-warning); color: white; } .bg-danger { background: var(--color-danger); color: white; } /* Opacity utilities */ .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } /* Cursor utilities */ .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-not-allowed { cursor: not-allowed; } /* Overflow utilities */ .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-y-auto { overflow-y: auto; } .overflow-x-auto { overflow-x: auto; } /* End of CSS index */