/* ═══════════════════════════════════════════════════════════════════════
   BASE.CSS  —  global element defaults built on the token layers
   ───────────────────────────────────────────────────────────────────────
   Intentionally light-touch so adopting the design system changes NO
   existing visuals. The global focus ring uses :where() (zero specificity),
   so any component that already defines its own focus style still wins.
   ═══════════════════════════════════════════════════════════════════════ */

/* Keyboard focus ring — zero-specificity, so it only fills the gap for
   elements that don't already style their focus. Mouse clicks never trigger
   it (:focus-visible). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
    border-radius: var(--ds-radius-xs);
}

/* Host for the single shared SVG glass-refraction filter (see <Glass>).
   Mounted once at the app root; carries no visual box of its own. */
.ds-glass-filter-host {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Opt-in helper for non-kit surfaces that want the standard focus ring. */
.ds-focus-ring:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
}