/* Main custom CSS file for Indico responsive design */

/* Import CSS variables first */
@import url('variables.css');

/* Import base responsive styles */
@import url('custom.css');

/* Import component-specific styles */
@import url('components.css');

/* 
 * This file imports all custom CSS for responsive design.
 * The styles are organized in the following order:
 * 1. Variables - CSS custom properties for consistent theming
 * 2. Base styles - Fundamental responsive grid and layout
 * 3. Component styles - Specific component overrides
 * 
 * This cascade ensures proper inheritance and specificity.
 */

/* Additional global overrides can be added below */

/* Ensure box-sizing is consistent */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Improve text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Focus styles for accessibility */
:focus {
    outline: 2px solid var(--primary-color, #007cac);
    outline-offset: 2px;
}

/* Selection styles */
::selection {
    background-color: var(--primary-color, #007cac);
    color: white;
}