/**
 * ARTBID Button System
 *
 * Single button system using .btn classes for artbid/button block
 *
 * Usage:
 * - ARTBID Button Block: .btn with .btn-* modifier classes
 * - Variants: .btn-primary, .btn-secondary, .btn-ghost, .btn-text
 * - Inverted: .btn-primary-inverted, .btn-secondary-inverted
 * - Sizes: .btn-sm, .btn-md (default), .btn-lg
 *
 * IMPORTANT: This file requires design-tokens/dist/tokens.css to be loaded first
 * The tokens are loaded via frontend-assets.php
 *
 * @package ARTBID
 * @since 2.0.0
 */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {
    /* Button typography */
    --btn-font-family: "helvetica-neue-lt-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --btn-font-weight: 500;
    --btn-text-transform: none; /* CRITICAL: No uppercase per design requirements */
    --btn-letter-spacing: var(--font-letterSpacing-normal, 0em); /* Use design token */

    /* SVG Art Frame Borders - ARTBID signature design element */
    --btn-art-frame-black: url("data:image/svg+xml,%3Csvg width='1018' height='183' viewBox='0 0 1018 183' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.7' d='M1007.8 174L1015 183H3L15 172L1007.8 174Z' fill='black'/%3E%3Cpath d='M1004 10L1015 0H3L13 11L1004 10Z' fill='black'/%3E%3Cpath d='M12 170L0 180V3L10 15L12 170Z' fill='black'/%3E%3Cpath d='M1009.5 170.5L1018 180V3L1007 13L1009.5 170.5Z' fill='black'/%3E%3C/svg%3E");
    --btn-art-frame-white: url("data:image/svg+xml,%3Csvg width='1018' height='183' viewBox='0 0 1018 183' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.7' d='M1007.8 174L1015 183H3L15 172L1007.8 174Z' fill='white'/%3E%3Cpath d='M1004 10L1015 0H3L13 11L1004 10Z' fill='white'/%3E%3Cpath d='M12 170L0 180V3L10 15L12 170Z' fill='white'/%3E%3Cpath d='M1009.5 170.5L1018 180V3L1007 13L1009.5 170.5Z' fill='white'/%3E%3C/svg%3E");

    /* Button sizing - using design tokens */
    --btn-padding-y-sm: var(--spacing-scale-1.5); /* 6px */
    --btn-padding-x-sm: var(--spacing-scale-3); /* 12px */
    --btn-font-size-sm: clamp(0.875rem, 0.84rem + 0.097vw, 0.9375rem); /* 14px → 15px */

    --btn-padding-y-md: var(--spacing-scale-2.5); /* 10px */
    --btn-padding-x-md: var(--spacing-scale-4); /* 16px */
    --btn-font-size-md: clamp(1rem, 0.903rem + 0.194vw, 1.1875rem); /* 16px → 19px */

    --btn-padding-y-lg: var(--spacing-scale-2.5); /* 10px */
    --btn-padding-x-lg: var(--spacing-scale-8); /* 32px */
    --btn-font-size-lg: clamp(1.125rem, 0.98rem + 0.323vw, 1.375rem); /* 18px → 22px */

    /* Button appearance */
    --btn-border-radius: var(--border-radius-brand, 0); /* Sharp corners for ARTBID */
    --btn-border-width: var(--border-width-1, 1px);
    --btn-transition: all var(--transition-duration-200, 200ms) var(--transition-timing-ease, ease);
    --btn-gap: var(--spacing-scale-2, 0.5rem);

    /* Focus styles */
    --btn-focus-outline-width: 2px;
    --btn-focus-outline-offset: 2px;
}

/* ============================================
   BUTTON FOUNDATION
   ============================================ */

.btn {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap, 0.5rem);
    box-sizing: border-box; /* Ensure padding is included in width */

    /* Typography */
    font-family: var(--btn-font-family, "helvetica-neue-lt-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-weight: var(--btn-font-weight, 500);
    text-transform: var(--btn-text-transform, none);
    letter-spacing: var(--btn-letter-spacing, normal);
    text-decoration: none;
    line-height: 1.2;

    /* Appearance */
    border-radius: var(--btn-border-radius, 0);
    border-width: var(--btn-border-width, 1px);
    border-style: solid;
    cursor: pointer;

    /* Transitions */
    transition: var(--btn-transition, all 200ms ease);

    /* Reset */
    outline: none;

    /* Default size (medium) - with fallbacks */
    padding: var(--btn-padding-y-md, 10px) var(--btn-padding-x-md, 16px);
    font-size: var(--btn-font-size-md, 1rem);
}

/* Focus states */
.btn:focus-visible {
    outline: var(--btn-focus-outline-width) solid var(--color-base-black);
    outline-offset: var(--btn-focus-outline-offset);
}

/* ============================================
   BUTTON SIZES
   ============================================ */

/* Small */
.btn.btn-sm {
    padding: var(--btn-padding-y-sm, 6px) var(--btn-padding-x-sm, 12px);
    font-size: var(--btn-font-size-sm, 0.875rem);
}

/* Medium (default) */
.btn.btn-md {
    padding: var(--btn-padding-y-md, 10px) var(--btn-padding-x-md, 16px);
    font-size: var(--btn-font-size-md, 1rem);
}

/* Large */
.btn.btn-lg {
    padding: var(--btn-padding-y-lg, 10px) var(--btn-padding-x-lg, 32px);
    font-size: var(--btn-font-size-lg, 1.125rem);
}

/* Responsive sizing adjustments */
@media (max-width: 767px) {
    .btn-lg {
        padding: var(--btn-padding-y-lg) calc(var(--btn-padding-x-lg) * 0.75); /* 24px */
    }
}

@media (min-width: 1024px) {
    .btn-lg {
        padding: var(--spacing-scale-3) calc(var(--btn-padding-x-lg) * 1.25); /* 12px 40px */
    }
}

/* ============================================
   BUTTON VARIANTS
   ============================================ */

/* Primary (filled black) */
.btn-primary {
    background-color: var(--color-base-black, #000000);
    color: var(--color-base-white, #ffffff);
    border-color: var(--color-base-black, #000000);
}

.btn-primary:hover {
    background-color: var(--color-gray-900);
    border-color: var(--color-gray-900);
}

.btn-primary:active {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-800);
}

/* Secondary (outlined with art frame) - ARTBID signature design */
.btn-secondary {
    background-color: transparent;
    color: var(--color-base-black);
    position: relative;
    border: 4px solid transparent;
    /* Art frame mitered borders - reference CSS custom property */
    border-image: var(--btn-art-frame-black) 12 stretch;
}

.btn-secondary:hover {
    background-color: var(--color-base-black);
    color: var(--color-base-white);
}

.btn-secondary:active {
    background-color: var(--color-gray-900);
}

/* Ghost (subtle) */
.btn-ghost {
    background-color: transparent;
    color: var(--color-base-black);
    border-color: transparent;
}

.btn-ghost:hover {
    background-color: var(--color-gray-100);
    border-color: transparent;
}

.btn-ghost:active {
    background-color: var(--color-gray-200);
}

/* Text (link-style) */
.btn-text {
    background-color: transparent;
    color: var(--color-base-black);
    border: 0;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.btn-text:hover {
    color: var(--color-gray-600);
}

.btn-text:active {
    color: var(--color-gray-700);
}

/* ============================================
   INVERTED VARIANTS (for dark backgrounds)
   ============================================ */

/* Primary Inverted (white filled) */
.btn-primary-inverted {
    background-color: var(--color-base-white);
    color: var(--color-base-black);
    border-color: var(--color-base-white);
}

.btn-primary-inverted:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-100);
}

.btn-primary-inverted:active {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-200);
}

.btn-primary-inverted:focus-visible {
    outline-color: var(--color-base-white);
}

/* Secondary Inverted (white outlined) */
.btn-secondary-inverted {
    background-color: transparent;
    color: var(--color-base-white);
    position: relative;
    border: 4px solid transparent;
    /* Art frame with white borders - reference CSS custom property */
    border-image: var(--btn-art-frame-white) 10 stretch;
}

.btn-secondary-inverted:hover {
    background-color: var(--color-base-white);
    color: var(--color-base-black);
}

.btn-secondary-inverted:active {
    background-color: var(--color-gray-100);
}

.btn-secondary-inverted:focus-visible {
    outline-color: var(--color-base-white);
}

/* Ghost Inverted */
.btn-ghost-inverted {
    background-color: transparent;
    color: var(--color-base-white);
    border-color: transparent;
}

.btn-ghost-inverted:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: transparent;
}

.btn-ghost-inverted:active {
    background-color: rgba(255, 255, 255, 0.2);
}

.btn-ghost-inverted:focus-visible {
    outline-color: var(--color-base-white);
}

/* Text Inverted */
.btn-text-inverted {
    background-color: transparent;
    color: var(--color-base-white);
    border: 0;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.btn-text-inverted:hover {
    color: rgba(255, 255, 255, 0.8);
}

.btn-text-inverted:active {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   SECONDARY BUTTON HEIGHT COMPENSATION
   Secondary buttons use 4px borders (vs 1px on other buttons)
   Reduce padding by 3px to maintain equal height across all buttons
   IMPORTANT: These must come AFTER size rules to override them
   ============================================ */

.btn-secondary.btn-sm {
    padding: 3px 9px; /* 6px - 3px, 12px - 3px */
}

.btn-secondary.btn-md {
    padding: 7px 13px; /* 10px - 3px, 16px - 3px */
}

.btn-secondary.btn-lg {
    padding: 7px 29px; /* 10px - 3px, 32px - 3px */
}

.btn-secondary-inverted.btn-sm {
    padding: 3px 9px; /* 6px - 3px, 12px - 3px */
}

.btn-secondary-inverted.btn-md {
    padding: 7px 13px; /* 10px - 3px, 16px - 3px */
}

.btn-secondary-inverted.btn-lg {
    padding: 7px 29px; /* 10px - 3px, 32px - 3px */
}

/* Responsive adjustments for large secondary buttons */
@media (max-width: 767px) {
    .btn-secondary.btn-lg,
    .btn-secondary-inverted.btn-lg {
        padding: 7px 21px; /* 10px - 3px, 24px - 3px (32 * 0.75) */
    }
}

@media (min-width: 1024px) {
    .btn-secondary.btn-lg,
    .btn-secondary-inverted.btn-lg {
        padding: 9px 37px; /* 12px - 3px, 40px - 3px (32 * 1.25) */
    }
}

/* ============================================
   DISABLED STATES
   ============================================ */

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   BUTTON GROUPS (core/buttons wrapper)
   Note: Keep .wp-block-buttons for button group layouts
   ============================================ */

.wp-block-buttons {
    gap: var(--spacing-fluid-hero-button-gap, 1rem);
}

/* Responsive button group behavior */
@media (max-width: 639px) {
    .wp-block-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .wp-block-buttons .wp-block-button {
        width: 100%;
    }

    .wp-block-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   UTILITY HELPERS
   ============================================ */

/* Full width button */
.btn-full-width {
    width: 100%;
}

/* Icon buttons */
.btn svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}

/* Loading state */
.btn.is-loading {
    color: transparent;
    position: relative;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-spin 0.6s linear infinite;
}

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