Basic @layer setup

/* Declare layer order first — this single line controls priority */
@layer reset, base, components;

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

@layer base {
  body { font-family: system-ui, sans-serif; line-height: 1.5; }
  h1 { font-size: 2rem; }
}

@layer components {
  /* Wins over reset and base — even with low-specificity selectors */
  h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
  .card { border-radius: 0.5rem; padding: 1rem; }
}

You are a senior frontend engineer setting up a scalable CSS architecture.

Goal: Set up CSS cascade layers using @layer — no JavaScript.

Technical constraints:
- Declare all layer names in a single @layer reset, base, components; statement at the top of the stylesheet.
- Each layer is defined separately with @layer name { ... } blocks.
- Later layers always win over earlier layers, regardless of selector specificity.
- Use oklch() for any demo colors, not hex or rgba().
- Do not use !important — layers make it unnecessary for typical overrides.

Framework variant (pick one):
A) Vanilla CSS — a standalone stylesheet with three layers: reset, base, components.
B) PostCSS — show how to split layers across multiple files using @import within each @layer.

Edge cases to handle:
- Unlayered styles (styles outside any @layer) always beat layered styles — treat unlayered as the highest implicit layer or wrap everything in layers.
- Third-party stylesheets loaded before your layers are implicitly unlayered — wrap them: @layer third-party { @import url(...); }.
- Inline styles and !important still override layers as per normal cascade rules.

Return CSS only.