/* ============================================================= UniHub — Main Design System Entry Point index.css Import this SINGLE file in every HTML page of UniHub. Order matters — do not change the import order. ============================================================= */ /* 1. Design tokens — CSS variables (all values live here) */ @import './tokens.css'; /* 2. Base reset — sensible HTML element defaults */ @import './base.css'; /* 3. Typography — heading, body, label, gradient text classes */ @import './typography.css'; /* 4. Component library — buttons, cards, inputs, nav, etc. */ @import './components.css'; /* 5. Layout — container, grid, flex, spacing utilities */ @import './layout.css'; /* ============================================================= HOW TO USE ───────────────────────────────────────────────────────────── In every page's : Available token variables: --color-* Colors and semantic palette --font-* Font families --text-* Font sizes (fluid) --font-* Font weights (named) --leading-* Line heights --tracking-* Letter spacings --space-* Spacing scale --radius-* Border radii --shadow-* Box shadows --duration-* Transition durations --ease-* Easing curves --transition-* Shorthand transitions --z-* Z-index scale --container-* Max widths --color-sem-* Per-semester accent colors Utility classes: .btn .btn-primary .btn-secondary .btn-outline .btn-ghost .btn-sm .btn-lg .btn-icon .btn-full .card .card-hover .card-glass .card-accent .card-resource .badge .badge-primary .badge-success .badge-error ... .chip .chip-active .sem-tag .sem-tag-1 ... .sem-tag-8 .form-group .form-label .form-input .form-select .search-wrapper .navbar .navbar-inner .navbar-brand .navbar-nav .avatar .avatar-sm .avatar-md .avatar-lg .avatar-group .alert .alert-success .alert-error .alert-warning .alert-info .progress .progress-bar .progress-sm .progress-lg .tabs .tab-list .tab-item .tab-active .skeleton .skeleton-text .skeleton-card .modal-overlay .modal .modal-close .toast-container .toast .divider .container .container-sm .container-md .container-lg .section .section-sm .section-lg .section-alt .section-header .grid .grid-2 .grid-3 .grid-4 .grid-auto-md .grid-semesters .flex .flex-col .items-center .justify-between ... .heading-1 ... .heading-5 .text-display-xl .text-display-lg .text-display-md .text-lead .text-caption .text-meta .text-overline .text-gradient .text-gradient-soft .section-label .animate-fade-in .animate-fade-in-up .animate-scale-in .animate-float .animate-pulse .delay-1 ... .delay-5 .bg-gradient-hero .bg-gradient-warm .bg-gradient-primary .rounded-* .shadow-* .text-* .font-* ... ============================================================= */