/* =============================================================================
   Component library (see docs/DESIGN.md).
   Surface-aware reusable components: they read the surface-context tokens
   (--state-layer, --on-surface, --control-accent, ...) defined in main.css,
   never raw brand colours, so ONE implementation works on both the navy and
   cream surfaces. Loaded on every page, after main.css.
   The marketing .btn (filled / outline) lives in main.css and is unchanged.
   ============================================================================= */

/* Icon button: icon-only control with a pill-shaped state layer and focus ring.
   Use for every icon-only button (table detail chevron, sort-order toggle,
   side-sheet close, drawer close, hamburger) so they round consistently. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--on-surface-muted);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background-color: var(--state-layer); color: var(--on-surface); }
.icon-btn:active { background-color: var(--state-layer-strong); }
.icon-btn:focus-visible {
    outline: 2px solid var(--control-accent);
    outline-offset: 2px;
}

/* Text button: low-emphasis action (e.g. Log out). Standalone - do NOT combine
   with .btn (which is the uppercase marketing CTA). Sentence case, surface-aware
   pill state layer. */
.btn--text {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-2);
    background: none;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--on-surface);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.btn--text:hover { background-color: var(--state-layer); }
.btn--text:active { background-color: var(--state-layer-strong); }
.btn--text:focus-visible {
    outline: 2px solid var(--control-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .icon-btn,
    .btn--text { transition: none; }
}