/* =============================================================================
   kof-reset.css — Scoped reset.
   v2.0.0
   ----------------------------------------------------------------------------
   ONLY applies inside .kof-root. Never global. Prevents WordPress theme bleed.
   No `* { all: revert }` — too aggressive. Targeted resets only.
   ============================================================================= */

.kof-root,
.kof-root *,
.kof-root *::before,
.kof-root *::after {
    box-sizing: border-box;
}

.kof-root {
    font-family: var(--kof-font-family);
    font-size: var(--kof-font-size-base);
    line-height: var(--kof-line-normal);
    color: var(--kof-color-text);
    background: var(--kof-color-surface-alt);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Strip default margins from typographic elements inside our scope.
   Components always declare their own spacing via BEM. */
.kof-root :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, pre) {
    margin: 0;
}

.kof-root :is(ul, ol) {
    padding: 0;
    list-style: none;
}

.kof-root a {
    color: inherit;
    text-decoration: none;
}

.kof-root button {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.kof-root :is(input, select, textarea) {
    font: inherit;
    color: inherit;
}

.kof-root img,
.kof-root svg {
    display: block;
    max-width: 100%;
}

/* Focus visible — soft brand outline, no ugly default ring. */
.kof-root :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--kof-color-brand);
    outline-offset: 2px;
    border-radius: var(--kof-radius-sm);
}

/* Selection */
.kof-root ::selection {
    background: var(--kof-color-brand-soft);
    color: var(--kof-color-ink);
}