Framework override layer

/* Declare order: framework first, your overrides last */
@layer framework, overrides;

/* Wrap the third-party framework in its layer */
@layer framework {
  .btn {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background: oklch(0.32 0.03 260);
    color: oklch(0.75 0.02 260);
    font-weight: 400;
    border: none;
    cursor: pointer;
  }
}

/* Your overrides — wins automatically, no !important needed */
@layer overrides {
  .btn {
    border-radius: 0.5rem;
    background: oklch(0.52 0.22 265);
    color: oklch(0.98 0.005 260);
    font-weight: 600;
  }
}

You are a senior frontend engineer integrating a UI framework into a design system.

Goal: Override third-party framework styles using CSS @layer — no !important.

Technical constraints:
- Declare @layer framework, overrides; at the top so the order is explicit.
- Wrap all framework imports or styles in @layer framework { ... }.
- Place all custom overrides in @layer overrides { ... } — it wins because it's last.
- Use oklch() for all colors, not hex or rgba().
- Selector specificity does not matter between layers — only layer order matters.

Framework variant (pick one):
A) Vanilla CSS — inline @layer blocks in a single stylesheet.
B) Sass/PostCSS — @layer framework { @import 'bootstrap'; } at the top, overrides in a separate file.

Edge cases to handle:
- Framework styles loaded via <link> are unlayered by default and will beat your @layer overrides — fix with @import inside a @layer block.
- If you cannot change how the framework loads, wrap its styles retroactively using a @layer with a lower priority in the declaration order.
- Confirm that !important inside a lower-priority layer still loses to a non-important rule in a higher-priority layer.

Return CSS only.