/* style.css — imports only. Component styles in styles/ directory.
 *
 * MOBILE-FIRST ARCHITECTURE
 * Base styles target 390px phones. Larger screens scale up via min-width queries.
 * Typography uses clamp() for smooth scaling — no breakpoints needed for font sizes.
 *
 * BREAKPOINTS (min-width, progressive enhancement):
 *   Base ........... 320-480px   No query (default)
 *   769px .......... Tablet/Desktop — 2-column layout, text-indent, side panel chat
 *   1025px ......... Large desktop — wider reading area, expanded controls
 *
 * IMPORT ORDER MATTERS:
 *   mobile.css MUST be last — it defines base mobile styles (FAB, bottom sheet,
 *   touch targets) and desktop overrides. Later imports win on equal specificity.
 *
 * FLUID TYPOGRAPHY (clamp):
 *   .book-content font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem) → 16px to 17.6px
 *   .book-content h1:         clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem) → 24px to 28px
 *   Padding:                  clamp(1.25rem, 0.5rem + 3vw, 5vw)
 *
 * Theme files remain in themes/ directory and are loaded dynamically.
 */

@import url('styles/base.css?v=1');
@import url('styles/layout.css?v=1');
@import url('styles/reading.css?v=13');
@import url('styles/chat.css?v=11');
@import url('styles/modals.css?v=4');
@import url('styles/onboarding.css?v=12');
@import url('styles/mobile.css?v=2');
@import url('styles/companion-rail.css?v=2');

/* iOS zooms into any focused field under 16px and does not zoom back out. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}