/**
 * PRISM Design System - Main Entry Point
 *
 * This file imports all modular CSS components in the correct order.
 * Include this file instead of individual CSS files for new pages.
 *
 * Note: screenplay.css still contains application-specific styles
 * and should be included separately for screenplay-related pages.
 */

/* =========================================================================
 * LAYER 1: DESIGN TOKENS
 * Variables and foundational values (must be first)
 * ========================================================================= */
@import 'css/tokens.css';

/* =========================================================================
 * LAYER 2: UTILITIES
 * Low-level utility classes
 * ========================================================================= */
@import 'css/utilities/accessibility.css';

/* =========================================================================
 * LAYER 3: COMPONENTS
 * Reusable UI components
 * ========================================================================= */
@import 'css/components/buttons.css';
@import 'css/components/toast.css';

/* =========================================================================
 * LAYER 4: APPLICATION-SPECIFIC
 * Collaboration, realtime features
 * ========================================================================= */
@import 'css/collaboration.css';

/* =========================================================================
 * LAYER 5: LAYOUTS
 * Page layout and responsive patterns
 * ========================================================================= */
@import 'css/layouts/mobile-reading.css';
@import 'css/layouts/reading-modes.css';
@import 'css/layouts/mobile-gestures.css';
@import 'css/layouts/mobile-navigation.css';

/* =========================================================================
 * FUTURE IMPORTS (to be added as files are created)
 * ========================================================================= */

/* Reset and typography (coming soon)
@import 'css/reset.css';
@import 'css/typography.css';
*/

/* Additional components (coming soon)
@import 'css/components/forms.css';
@import 'css/components/cards.css';
@import 'css/components/modals.css';
@import 'css/components/badges.css';
*/

/* Layouts (coming soon)
@import 'css/layouts/header.css';
@import 'css/layouts/sidebar.css';
@import 'css/layouts/responsive.css';
*/

/* Animations (coming soon)
@import 'css/utilities/animations.css';
*/

/* =========================================================================
 * FOUC PREVENTION
 * Reveal body once CSS has loaded (overrides inline opacity:0)
 * ========================================================================= */
body {
    opacity: 1 !important;
    transition: opacity 0.05s ease-out;
}