/* ===================================================================== PELAGIQMARKET — GLOBAL DESIGN SYSTEM ===================================================================== Design language: "Chart & Current" — the visual grammar of nautical charts, depth soundings, and ship instrumentation, applied to a modern commerce UI. Deep "abyss" surfaces for wayfinding moments (header, footer, hero), light "foam" surfaces for working screens (search, cart, checkout, orders, account) where legibility and speed matter more than atmosphere. FILE MAP --------------------------------------------------------------------- 1. Tenant theme tokens — the ONLY variables a tenant skin should need to touch. Override these in a [data-theme="..."] block (see bottom of file for two worked examples) or by writing tenant values into :root from your React theme provider. 2. Derived system tokens — spacing, radii, shadows, motion, z-index. Rarely tenant-specific, but still exposed as variables for consistency. 3. Reset & base elements 4. Typography utilities 5. Layout utilities (container, grid, stack, cluster) 6. Components: buttons, forms, badges, cards, breadcrumbs, pagination, tables, alerts, stepper, ratings, empty states, site header / nav, site footer, contour divider (signature motif) 7. Demo-only tenant theme switcher (delete before shipping — see note at that section) REACT NOTES --------------------------------------------------------------------- Class names are intentionally flat and component-scoped (BEM-lite: `.block`, `.block__part`, `.block--variant`) so each block maps 1:1 to a future component: .site-header ->
.site-footer ->