/* ============================================================================ FILE: main.css PURPOSE: The single CSS entry point for the entire site. Every page template links to THIS file only — never to individual foundation files directly. This guarantees load order and cascade-layer order can never drift page-to-page. HOW IT WORKS: 1. The @layer statement below declares the FULL cascade layer order up front, before any rules are defined. This is what makes CSS Cascade Layers work correctly: layers apply in the order they are FIRST DECLARED, not the order their rules happen to appear later in the file, and a later-declared layer always beats an earlier one regardless of selector specificity. This is the direct, native-CSS3 solution to the "specificity war" problem named in Blueprint 02 §3 — no naming convention can fully prevent that problem; cascade layers structurally CAN. 2. tokens.css is imported outside the layer system on purpose — see the note in tokens.css: custom properties don't need cascade- layer protection, they resolve identically regardless of layer. 3. Every other file is imported in the same order as the declared layers, so source order and layer order always agree (kept deliberately redundant/consistent to avoid confusing future maintainers, even though layer order technically overrides source order on its own). PRODUCTION NOTE: For production, these six @import requests should be concatenated into a single minified file as part of the build/deploy step (Blueprint 02 §11 — script/asset loading: minimize requests). They are kept as separate @import statements here, in development, for the exact reason this whole document exists: clear separation of concerns per file, easy to review, easy to hand off. Concatenation is a build-time optimization, not an architecture change — the layer order and file boundaries defined here remain identical either way. ============================================================================ */ /* Declare the authoritative layer order FIRST, before any content. UPDATED in Milestone 3, exactly as pre-documented in Milestone 2's "Future Imports" comment — the planned extension point being executed, not a redesign. */ @layer reset, base, accessibility, layout, components, navigation, utilities, pages; /* Design tokens — outside the layer system, always available first. */ @import url('tokens.css'); /* Light theme overrides (Milestone 3) — also outside the layer system, for the same reason as tokens.css itself: custom property resolution follows selector specificity, not layers, and [data-theme="light"] must be able to override :root regardless of layer order. */ @import url('theme-light.css'); /* Foundation layers, in cascade order (Milestone 1 — unchanged). */ @import url('reset.css') layer(reset); @import url('base.css') layer(base); @import url('accessibility.css') layer(accessibility); @import url('layout.css') layer(layout); /* Component layer (Milestone 2 — unchanged). */ @import url('components/buttons.css') layer(components); @import url('components/links.css') layer(components); @import url('components/indicators.css') layer(components); @import url('components/icons.css') layer(components); @import url('components/forms.css') layer(components); @import url('components/progress-spinner.css') layer(components); @import url('components/cards.css') layer(components); @import url('components/alerts.css') layer(components); @import url('components/modal.css') layer(components); @import url('components/breadcrumbs.css') layer(components); @import url('components/pagination.css') layer(components); @import url('components/tabs.css') layer(components); @import url('components/accordion.css') layer(components); @import url('components/tooltip.css') layer(components); @import url('components/empty-state.css') layer(components); @import url('components/search-box.css') layer(components); @import url('components/filter-bar.css') layer(components); @import url('components/countdown.css') layer(components); /* Phase 1 (v2.0) addition */ @import url('components/video-card.css') layer(components); /* Phase 1.5 (v2.0) addition */ @import url('components/responsive-image.css') layer(components); /* Phase 1.5 (v2.0) addition */ @import url('components/quick-facts.css') layer(components); /* Phase 2 (v2.0) addition */ @import url('components/info-card.css') layer(components); /* Phase 2 (v2.0) addition */ @import url('components/timeline.css') layer(components); /* Phase 2 (v2.0) addition */ @import url('components/location-card.css') layer(components); /* Map Explorer addition */ @import url('components/tool-card.css') layer(components); /* Tools Hub addition */ @import url('components/live-module-premium.css') layer(pages); /* Hero live module premium upgrade -- deliberately layer(pages), not layer(components): this file's hover rule needs to override .reveal.is-revealed's transform, which lives in the pages layer (same reasoning as premium.css/homepage.css above). CSS layers resolve by layer order first, specificity only within a layer -- confirmed via direct testing that a components-layer rule cannot win against a pages-layer rule regardless of selector specificity. */ @import url('components/website-share.css') layer(components); /* Global website share system */ @import url('components/ad-slots.css') layer(components); /* Ad Manager -- device targeting, opt-in only */ @import url('components/comparison-table.css') layer(components); /* Phase 2 (v2.0) addition */ @import url('components/summary-box.css') layer(components); /* Phase 2 (v2.0) addition */ @import url('components/toc.css') layer(components); /* Batch 1 SEO expansion addition */ @import url('components/related-articles.css') layer(components); /* Phase 2 (v2.0) addition */ @import url('components/article-meta.css') layer(components); /* Phase 3 (v2.0) addition */ @import url('components/article-nav.css') layer(components); /* Phase 3 (v2.0) addition */ @import url('components/search-live-results.css') layer(components); /* Phase 4 (v2.0) addition */ @import url('components/cookie-notice.css') layer(components); /* Phase 4 (v2.0) addition */ /* Navigation layer (Milestone 3 — Structural & Navigation Components). Deliberately AFTER components: nav controls reuse component classes (.btn, .icon, .chip-like disclosure patterns) and must be able to make layout-specific adjustments to them in their header/footer context without losing that fight to the components layer. */ @import url('navigation/header.css') layer(navigation); @import url('navigation/theme-toggle.css') layer(navigation); @import url('navigation/mega-menu.css') layer(navigation); @import url('navigation/mobile-nav.css') layer(navigation); @import url('navigation/footer.css') layer(navigation); @import url('utilities.css') layer(utilities); @import url('section-utilities.css') layer(utilities); /* Milestone 4 addition */ /* -------------------------------------------------------------------- PAGES LAYER — Phase 1 (v2.0) addition. Per Blueprint 02's own documented exception, the Homepage is one of two pages allowed genuinely page-specific styling (the other being any future Interactive Map instance) rather than composing purely from shared components. Kept in its own layer, after utilities, so a true page-specific override always wins the rare case it's needed — everything else on this page still comes from the shared component library underneath it, unchanged. -------------------------------------------------------------------- */ @import url('homepage.css') layer(pages); /* v3.0 Premium Upgrade additions -- premium-tokens.css has no @layer (custom properties aren't layer-scoped), loaded plain; premium.css is @layer pages, same layer as homepage.css above, for the same reason (genuinely page-specific/opt-in visual treatments). */ @import url('premium-tokens.css'); @import url('premium.css') layer(pages); /* -------------------------------------------------------------------- FUTURE IMPORTS (documented placeholders — not yet built) -------------------------------------------------------------------- No new cascade layer is anticipated for Milestone 4 (Template Assembly) — templates compose the layers that already exist. If a genuine new layer need emerges, it is added here first, following the same documented-extension-point pattern used in Milestones 2 and 3. -------------------------------------------------------------------- */