/* ============================================================ TeamCapsule Design System — Entry Point ------------------------------------------------------------ PHASE 1: FOUNDATION ONLY. The single stylesheet a page needs to link in order to get the TeamCapsule foundation: ------------------------------------------------------------ ⚠ NOT YET LINKED FROM ANY PAGE — BY DESIGN ------------------------------------------------------------ Phase 1 requires that existing pages render VISUALLY UNCHANGED. Rather than verifying that by inspecting 68 pages, this foundation is guaranteed inert two ways: 1. No page links it. app/inc/header.php, header2.php and all 28 mobile/*.html pages are untouched, so in production this file is currently downloaded by nobody. 2. Even when it IS linked (Phase 2), it still cannot restyle legacy markup, because: - every rule lives inside an @layer, and unlayered CSS (which is 100% of the current app) outranks ALL layered CSS regardless of specificity; - no rule targets a bare element (no `body`, `h1`, `p`) or any legacy class — only new, unused `.tc-` classes and `[data-tc-*]` attributes that no markup carries yet. That is what makes Phase 2 safe to start: the foundation can be linked and proven to load before a single pixel moves. ------------------------------------------------------------ LOAD ORDER ------------------------------------------------------------ tc-layers.css MUST be first — it declares the layer order that every later file relies on. The rest are ordered for human readability; their precedence comes from their @layer, not from this sequence. @import is used rather than multiple tags so that a consuming page has exactly one thing to reference and cannot get the order wrong. The files are small and the count is low, so the extra requests are an acceptable trade for that guarantee. If this ever grows, concatenate at sync time — do not push ordering responsibility back onto pages. ------------------------------------------------------------ CONTENTS ------------------------------------------------------------ tc-layers.css cascade layer order (no rules) tc-tokens-brand.css raw palette: brand, modules, ramps tc-tokens-semantic.css role tokens: surface/text/border/status tc-fonts.css self-hosted Poppins @font-face tc-typography.css type scale + .tc-heading/.tc-body … tc-base.css global element defaults (Phase 2B) tc-bootstrap-bridge.css --bs-* document vars -> tc tokens tc-platform.css [data-tc-platform] / [data-tc-module] tc-shell.css global shell safe-area insets (Phase 2A) Phase 3 adds tc-components/*; Phase 3+ adds tc-modules/*. Register any new file BOTH here and in scripts/sync-css.sh's SHARED_CSS manifest, or it will not reach the mobile bundle. See docs/teamcapsule-design-system.md for the full rationale. ============================================================ */ @import url('tc/tc-layers.css'); @import url('tc/tc-tokens-brand.css'); @import url('tc/tc-tokens-semantic.css'); @import url('tc/tc-fonts.css'); @import url('tc/tc-typography.css'); @import url('tc/tc-base.css'); @import url('tc/tc-bootstrap-bridge.css'); @import url('tc/tc-platform.css'); @import url('tc/tc-shell.css'); /* ── Components (Phase 3A) ─────────────────────────────────────── */ @import url('tc/tc-button.css'); @import url('tc/tc-card.css'); @import url('tc/tc-form.css'); @import url('tc/tc-alert.css'); /* ── Components (Phase 3B) ─────────────────────────────────────── */ @import url('tc/tc-nav.css'); @import url('tc/tc-modal.css'); @import url('tc/tc-table.css'); @import url('tc/tc-badge.css'); @import url('tc/tc-feedback.css'); /* ── Components (Phase 3C) ───────────────────────────────────────── The remaining generic/shared layer. tc-pagination.css also took ownership of the DataTables pagination block that tc-table.css held in Phase 3B — both are in tc-components, so the move is cascade-neutral. */ @import url('tc/tc-tabs.css'); @import url('tc/tc-pagination.css'); @import url('tc/tc-back-link.css'); @import url('tc/tc-avatar.css'); @import url('tc/tc-list.css'); @import url('tc/tc-footer.css'); /* ── BenchIQ module (Phase 3D) ───────────────────────────────────── The first tc-modules-layer components. tc-bench-tokens.css must come first: it declares the module tokens (dark game-day surfaces, rank/medal hues, on-dark status colours) that the three component files consume. These live in the tc-modules layer, which sits ABOVE tc-components and BELOW tc-platform — so a BenchIQ widget can restyle a shared component without forking it, while a platform tap-target or safe-area rule still wins over both. */ /* ── Page chrome (Phase 4A) ──────────────────────────────────────── Added during the SCREEN migration, not the component build-out: the page-by-page pass found .page-header / .section-label / .fade-up / .-page re-declared 25/23/24/14 times across the pages in scope. Role-named and generic, so it belongs in tc-components alongside the Phase 3 library rather than in any page. See the header of the file for the full justification. */ @import url('tc/tc-page.css'); /* ── Dark surface scope (Phase 4B) ───────────────────────────────── Product-neutral dark theme, applied per subtree with `.tc-dark`. Token re-points only — no component, no layout, no element rule — so it cannot move a box, only change what colours the existing components resolve to. Imported BEFORE the BenchIQ module tokens because tc-bench-tokens.css composes on top of it. */ @import url('tc/tc-theme-dark.css'); @import url('tc/tc-bench-tokens.css'); @import url('tc/tc-bench-stat.css'); @import url('tc/tc-bench-player.css'); @import url('tc/tc-bench-game.css'); /* ── BenchIQ module (Phase 5B) ───────────────────────────────────── The game event feed (period dividers + action-toned event rows), added when app/mobile-playbyplay.php was migrated. Imported after tc-badge.css because .tc-feed__item--* re-points that component's own --tc-badge-* variables for its descendants rather than forking it. See the file header for why this is the one component Phase 5B added and which two page patterns were deliberately NOT promoted. */ @import url('tc/tc-bench-feed.css'); /* ── BenchIQ module (Phase 5D) ───────────────────────────────────── Rink event tokens. TOKENS ONLY — no selector, no component, no geometry — so importing it cannot move a box on either logger. It is a separate file from tc-bench-tokens.css because the two have OPPOSITE surface assumptions: tc-bench-tokens.css re-points shared roles for a near-black game-day surface, whereas the rink is white ice and its tokens must stay pinned to the light-surface hues in both themes. Keeping them apart is what stops a later dark-theme re-point from silently bleaching the markers. See the file header for the measured figures. */ @import url('tc/tc-bench-rink.css'); /* ── BenchIQ module (Phase 6A) ────────────────────────────────────── Video/media card for the coach video-review grid (Video Library). Imported last of the BenchIQ files — it composes .tc-btn (already imported above) rather than declaring its own button skin, and its card surface is unrelated to the rink/feed/game components it sits beside. See the file header for the legacy-classname coexistence contract. */ @import url('tc/tc-bench-media.css'); /* ── BenchIQ module (Phase 6B.1) ──────────────────────────────────── Video Editor palette tokens. TOKENS ONLY, scoped to `.tc-video-editor` (see the file header for why this is a separate token set from tc-bench-tokens.css rather than a re-point onto it) — so importing it cannot move a box or change a colour anywhere else in the app. Consumed by app/video-editor.php's and mobile/video-editor.html's own page-local `