/**
 * =============================================================================
 * PCOS cascade layers (CSS @layer)
 * =============================================================================
 * Load this file first on every page that uses PCOS global stylesheets.
 *
 * Why layers?
 *   - Predictable precedence without specificity wars or !important arms races.
 *   - Clear buckets for code review: reset vs tokens vs layout shell vs UI vs utilities vs product overrides.
 *
 * Precedence (weakest → strongest at equal specificity inside the author stylesheet):
 *
 *   ┌─────────────┬──────────────────────────────────────────────────────────┐
 *   │ reset       │ Box model defaults, non-opinionated normalizations       │
 *   │ tokens      │ Design tokens (:root / .pcos-site custom properties)     │
 *   │ base        │ Document + app shell (html, body, .pcos-site surface)    │
 *   │ components  │ Layout, sections, widgets, demo UI, marketing chrome     │
 *   │ utilities   │ Single-purpose helpers (sr-only, truncate, tabular nums) │
 *   │ overrides   │ Theme / tenant / a11y modes that must win last in-layer  │
 *   └─────────────┴──────────────────────────────────────────────────────────┘
 *
 * Note: Rules *outside* any @layer (e.g. Vite CSS modules) still beat all layers.
 *       This stack only orders layered global CSS relative to itself.
 *
 * Typical load order (static HTML):
 *   1. pcos-layers.css
 *   2. pcos-home.css (and/or pcos-platform.css, demo shell, etc.)
 *   3. pcos-utilities.css   ← last among shared globals so utilities stay high
 *
 * Staff (Vite): layers → tokens → utilities → @layer overrides { index.css… }
 */

@layer reset, tokens, base, components, utilities, overrides;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  picture,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }

  :where(button, input, textarea, select) {
    font: inherit;
  }
}