/* ════════════════════════════════════════════════════════════════════
   PF DESIGN SYSTEM — Button Component
   ────────────────────────────────────────────────────────────────────
   BEM-named, fully token-driven, theme-agnostic, WCAG AA compliant.

   USAGE
     <button class="pf-button">Default (primary)</button>
     <button class="pf-button pf-button--secondary">Secondary</button>
     <button class="pf-button pf-button--ghost">Ghost</button>
     <button class="pf-button pf-button--danger">Delete</button>
     <button class="pf-button pf-button--link">Link-styled</button>

     <!-- Sizes -->
     <button class="pf-button pf-button--sm">Small</button>
     <button class="pf-button pf-button--lg">Large</button>

     <!-- States (auto via :hover, :active, :focus, :disabled) -->
     <button class="pf-button" disabled>Disabled</button>

     <!-- With icon -->
     <button class="pf-button">
       <svg class="pf-button__icon">…</svg>
       <span class="pf-button__label">Save</span>
     </button>

   ACCESSIBILITY
     • Focus-visible only (no focus on mouse-click) per WCAG 2.4.7
     • Focus ring: --pf-focus-ring (high-contrast indigo on surface)
     • Disabled state: opacity 0.5 + cursor not-allowed + aria-disabled
     • Min touch target: 44px height (WCAG 2.5.5 — auto via padding + line-height)
     • Color contrast: Phase B arch-test pins ≥ 4.5:1 for text-on-bg

   THEMING
     All visual properties consume --pf-button-* component tokens which
     in turn reference --pf-color-* semantic tokens. Override per theme
     by re-declaring component tokens in themes.dark.css (NOT here).

   Version: 1.0.0
   Last revised: 2026-05-09
   ──────────────────────────────────────────────────────────────────── */

/* ─── Block: .pf-button (default = primary variant) ───────────── */

.pf-button {
    /* Layout — flex container so icon + label align cleanly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pf-space-2);

    /* Typography */
    font-family: inherit;
    font-size: var(--pf-button-font-size);
    font-weight: var(--pf-button-font-weight);
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;

    /* Box */
    padding: var(--pf-button-padding-y) var(--pf-button-padding-x);
    border-radius: var(--pf-button-radius);
    border: 1px solid var(--pf-button-border-primary);
    cursor: pointer;
    user-select: none;

    /* Default = primary variant */
    background: var(--pf-button-bg-primary);
    color: var(--pf-button-fg-primary);

    /* Smooth interactive transitions */
    transition:
        background var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        border-color var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        box-shadow var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        transform var(--pf-motion-duration-fast) var(--pf-motion-ease-out);
}

/* ─── States ──────────────────────────────────────────────────── */

.pf-button:hover:not(:disabled):not(.pf-button--disabled) {
    background: var(--pf-button-bg-primary-hover);
    border-color: var(--pf-button-bg-primary-hover);
}

.pf-button:active:not(:disabled):not(.pf-button--disabled) {
    background: var(--pf-button-bg-primary-pressed);
    border-color: var(--pf-button-bg-primary-pressed);
    transform: translateY(1px);
}

.pf-button:focus-visible {
    outline: none;
    box-shadow: var(--pf-button-shadow-focus);
}

.pf-button:disabled,
.pf-button.pf-button--disabled,
.pf-button[aria-disabled="true"] {
    background: var(--pf-button-bg-primary-disabled);
    border-color: var(--pf-button-bg-primary-disabled);
    color: var(--pf-color-text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ─── Modifier: --secondary (medium emphasis) ────────────────── */

.pf-button--secondary {
    background: var(--pf-button-bg-secondary);
    color: var(--pf-button-fg-secondary);
    border-color: var(--pf-button-border-secondary);
}

.pf-button--secondary:hover:not(:disabled):not(.pf-button--disabled) {
    background: var(--pf-button-bg-secondary-hover);
    border-color: var(--pf-button-border-secondary);
}

.pf-button--secondary:active:not(:disabled):not(.pf-button--disabled) {
    background: var(--pf-button-bg-secondary-pressed);
}

/* ─── Modifier: --ghost (low emphasis — text-only with hover bg) ─── */

.pf-button--ghost {
    background: var(--pf-button-bg-ghost);
    color: var(--pf-button-fg-ghost);
    border-color: transparent;
}

.pf-button--ghost:hover:not(:disabled):not(.pf-button--disabled) {
    background: var(--pf-button-bg-ghost-hover);
    color: var(--pf-button-fg-ghost-hover);
    border-color: transparent;
}

/* ─── Modifier: --danger (destructive action) ─────────────────── */

.pf-button--danger {
    background: var(--pf-button-bg-danger);
    color: var(--pf-button-fg-danger);
    border-color: var(--pf-button-bg-danger);
}

.pf-button--danger:hover:not(:disabled):not(.pf-button--disabled) {
    background: var(--pf-button-bg-danger-hover);
    border-color: var(--pf-button-bg-danger-hover);
}

/* Subtle danger — for "Delete with confirmation"-style micro-actions */
.pf-button--danger.pf-button--ghost {
    background: transparent;
    color: var(--pf-color-status-danger);
    border-color: transparent;
}

.pf-button--danger.pf-button--ghost:hover:not(:disabled) {
    background: var(--pf-button-bg-danger-soft);
    color: var(--pf-color-status-danger-fg);
}

/* ─── Modifier: --link (anchor styled minimally as text-link) ───── */

.pf-button--link {
    background: transparent;
    color: var(--pf-button-fg-link);
    border-color: transparent;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pf-button--link:hover:not(:disabled):not(.pf-button--disabled) {
    background: transparent;
    color: var(--pf-button-fg-link-hover);
}

/* ─── Sizes ──────────────────────────────────────────────────── */

.pf-button--sm {
    padding: var(--pf-button-padding-y-sm) var(--pf-button-padding-x-sm);
    font-size: var(--pf-button-font-size-sm);
}

.pf-button--lg {
    padding: var(--pf-button-padding-y-lg) var(--pf-button-padding-x-lg);
    font-size: var(--pf-button-font-size-lg);
}

/* ─── Width modifiers ────────────────────────────────────────── */

.pf-button--block {
    width: 100%;
}

/* ─── Element: __icon (SVG inside button) ────────────────────── */

.pf-button__icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* ─── Element: __label (wraps text content for advanced layouts) ── */

.pf-button__label {
    /* No styling — exists for accessibility-friendly icon+label structures
       and to allow visually-hidden labels via .pf-visually-hidden helper. */
}

/* ─── Loading state (shows spinner, disables interaction) ───── */

.pf-button--loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.pf-button--loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--pf-button-fg-primary);
    animation: pf-button-spin 0.6s linear infinite;
}

@keyframes pf-button-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pf-button--loading::after {
        animation: none;
        border-style: dotted;
    }
}