/* All native buttons participate automatically. Use button-control for links
   and file-picker labels that act as buttons, not for ordinary text links.
   Components own layout and semantic colours; this layer owns interaction. */
@layer control-base, app, control-states;

@layer control-base {
    :root {
        --control-accent: #7fd7c5;
        --control-hover-background: #24343a;
        --control-focus-ring: rgba(127, 215, 197, .78);
        --control-disabled-opacity: .62;
    }

    :where(button, .button-control) {
        padding: 8px 10px;
        border: 1px solid #52656c;
        border-radius: 8px;
        background: #182328;
        color: #eef3f5;
        font: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
}

@layer control-states {
    :where(button, .button-control, summary) {
        cursor: var(--control-cursor, pointer);
    }

    /* Hover feedback is shared, including links and previously unstyled buttons.
       Do not leave a sticky hover highlight on touch-only devices. */
    @media (hover: hover) {
        :where(button, .button-control, summary):not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)):hover {
            border-color: var(--control-accent);
            background: var(--control-hover-background);
            box-shadow: inset 0 0 0 1px var(--control-accent);
        }
    }

    :where(button, .button-control, summary):not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)):active {
        box-shadow: inset 0 0 0 2px var(--control-accent);
    }

    :where(button, .button-control, summary, a[href]):focus-visible,
    .button-control:has(input:focus-visible) {
        outline: 3px solid var(--control-focus-ring);
        outline-offset: 2px;
    }

    :where(button, .button-control):is(:disabled, [aria-disabled="true"], :has(input:disabled)),
    input:disabled {
        cursor: not-allowed;
        opacity: var(--control-disabled-opacity);
    }
    .button-control input[type="file"]:disabled { cursor: not-allowed; opacity: 0; }
}