/* ==========================================================
   BUTTON
   Arcade UI Kit — flat design
   (solid fill, bold ink outline, hard diagonal shadow —
   no gradients, no blur, no 3D bevel)
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:44px;

    padding:0 20px;

    border:2px solid var(--ink);

    border-radius:var(--radius-sm);

    background:var(--surface);

    color:var(--ink);

    box-shadow:var(--shadow-sm);

    font-family:inherit;

    font-size:var(--font-size-sm);

    font-weight:700;

    line-height:1;

    letter-spacing:.02em;

    text-transform:uppercase;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    user-select:none;

    transition:
        transform 100ms ease,
        box-shadow 100ms ease;

}

.btn:hover{

    transform:translate(-1px,-1px);

    box-shadow:4px 4px 0 var(--ink);

}

.btn:active{

    transform:translate(3px,3px);

    box-shadow:none;

}


/* ==========================================================
   ICON
========================================================== */

.btn__icon{

    width:20px;
    height:20px;
    min-width:20px;
    min-height:20px;

    display:block;

    flex:none;

    object-fit:contain;

}

.btn--icon{

    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;

    padding:0;
    gap:0;

}


/* ==========================================================
   ICON BUTTON SIZE
========================================================== */

.btn--icon.btn--xs{ width:32px; height:32px; min-width:32px; min-height:32px; padding:0; gap:0; }
.btn--icon.btn--xs .btn__icon{ width:16px; height:16px; }

.btn--icon.btn--sm{ width:38px; height:38px; min-width:38px; min-height:38px; padding:0; gap:0; }
.btn--icon.btn--sm .btn__icon{ width:18px; height:18px; }

.btn--icon.btn--md{ width:44px; height:44px; min-width:44px; min-height:44px; padding:0; gap:0; }
.btn--icon.btn--md .btn__icon{ width:20px; height:20px; }

.btn--icon.btn--lg{ width:52px; height:52px; min-width:52px; min-height:52px; padding:0; gap:0; }
.btn--icon.btn--lg .btn__icon{ width:24px; height:24px; }

.btn--icon.btn--xl{ width:60px; height:60px; min-width:60px; min-height:60px; padding:0; gap:0; }
.btn--icon.btn--xl .btn__icon{ width:28px; height:28px; }


/* ==========================================================
   COLOR VARIANTS
========================================================== */

.btn--primary{ background:var(--primary); color:#FFFFFF; }
.btn--secondary{ background:var(--secondary); color:var(--ink); }
.btn--success{ background:var(--success); color:#FFFFFF; }
.btn--warning{ background:var(--warning); color:var(--ink); }
.btn--danger{ background:var(--danger); color:#FFFFFF; }

.btn--primary .btn__icon,
.btn--success .btn__icon,
.btn--danger .btn__icon{
    filter:brightness(0) invert(1);
}


/* ==========================================================
   OUTLINE
========================================================== */

.btn--outline{

    background:var(--surface);
    color:var(--ink);
    border-color:var(--ink);

}


/* ==========================================================
   GHOST
========================================================== */

.btn--ghost{

    background:transparent;
    color:var(--ink);
    border-color:transparent;
    box-shadow:none;

}

.btn--ghost:hover{

    background:rgba(30,30,36,.06);
    transform:none;
    box-shadow:none;

}

.btn--ghost:active{

    background:rgba(30,30,36,.1);
    transform:none;

}


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

.btn--xs{ min-height:32px; padding:0 14px; font-size:11px; }
.btn--sm{ min-height:38px; padding:0 16px; font-size:12px; }
.btn--md{ min-height:44px; padding:0 20px; font-size:var(--font-size-sm); }
.btn--lg{ min-height:52px; padding:0 24px; font-size:15px; }
.btn--xl{ min-height:60px; padding:0 28px; font-size:var(--font-size-md); }


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

.btn:disabled,
.btn.is-disabled{

    opacity:.45;
    cursor:not-allowed;
    transform:none;
    box-shadow:var(--shadow-sm);

}


/* ==========================================================
   FOCUS
========================================================== */

.btn:focus-visible{

    outline:3px solid color-mix(in srgb, var(--info) 45%, transparent);
    outline-offset:2px;

}