[P1][Plan 5] SF-018 — Consolidate eight global CSS layers into scoped design architecture

[Ankit6149]

Confirmed problem

The root layout loads eight global CSS layers, and key selectors such as .studio-grid are redefined across multiple files. Final appearance depends on import order and specificity patches, causing recurring visual regressions and oversized/overflowing elements.

Scope

• Keep only a small reset and token layer global.
• Move landing, Studio, review, library, connections, settings, and legal styles into scoped modules/components.
• Remove duplicate selectors and override-only files as each surface migrates.
• Define one responsive grid contract, typography scale, spacing system, and maximum text widths.
• Preserve the existing approved visual direction; this is architecture repair, not arbitrary redesign.

Acceptance criteria

• No page relies on chained global override files.
• Shared tokens have one authoritative definition.
• Studio layout behaves predictably at desktop, tablet, mobile, 200% zoom, and long-content states.
• Removing one feature stylesheet cannot silently restyle unrelated pages.
• Duplicate selector audit is clean.

Required verification

• Visual regression screenshots across all routes/viewports.
• Long heading, long error, twelve tabs, and 2,500-word content tests.
• CSS duplication/specificity review and production build.