/* Global box-sizing reset + a global keyboard-focus ring — the ONLY global
   stylesheet in the app. Both are cross-cutting primitives, not a shared "look":
   box-sizing decides whether width includes padding/border, and the focus ring is
   an accessibility primitive every variant needs identically. Neither sets colors,
   fonts, spacing, or typography for content — that all stays in each variant's own
   scoped CSS. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Visible focus indicator for keyboard users, consistent across every variant.
   :focus-visible only shows for keyboard/AT focus (not mouse clicks). The 2px
   offset lifts the ring off the element onto the (uniformly dark) page, so it
   stays visible even when the focused control itself has a purple background.
   No rule anywhere sets outline:none — this augments the default, never hides it. */
:focus-visible {
    outline: 2px solid #a96dff;
    outline-offset: 2px;
}