/* ============================================================
   AILA Design System — Giada Theme
   Button component tokens
   ------------------------------------------------------------
   22 variant combinations × 3 sizes × 4 states.

   This file exposes `--aila-button-*` tokens that bind to the
   semantic layer (neutral/primary/danger/warning/success) from
   tokens/semantic.light.css.

   Applied to the button via:
     .btn { ...size tokens }
     .btn[data-variant="primary"] { ...variant tokens }
     .btn[data-state="hover"]     { ...state-specific overrides }

   Resolutions applied to source spec:
   · Icon sizes: source said "--icon-4/5/6" — those are TOKEN
     REFERENCES, not pixel strings. Bound to --icon-4 (16px),
     --icon-5 (20px), --icon-6 (24px).
   · lg font: source said "--label-md" (smaller than md's label-lg).
     Corrected to --label-xl per user confirmation.
   · `-disabled-font` (missing leading dash on some bg-disabled
     slots) resolved to --disabled-font (disabled color behavior).
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     Shared
     ------------------------------------------------------------ */
  --aila-button-border-width:   var(--border-1);
  --aila-button-ring-width:     var(--border-2);
  --aila-button-ring-offset:    var(--spacing-0-5);
  --aila-button-transition:
    color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------
     Size: sm
     ------------------------------------------------------------ */
  --aila-button-sm-padding-x:                   var(--spacing-3);
  --aila-button-sm-padding-y:                   var(--spacing-1-5);
  --aila-button-sm-padding-left-icon-start:     var(--spacing-2);
  --aila-button-sm-padding-right-icon-start:    var(--spacing-3);
  --aila-button-sm-padding-left-icon-end:       var(--spacing-3);
  --aila-button-sm-padding-right-icon-end:      var(--spacing-2);
  --aila-button-sm-padding-x-icon-only:         var(--spacing-2);
  --aila-button-sm-padding-y-icon-only:         var(--spacing-2);
  --aila-button-sm-border-radius:               var(--rounded-full);
  --aila-button-sm-gap:                         var(--spacing-1-5);
  --aila-button-sm-icon-size:                   var(--icon-4);
  /* Font (label-md) */
  --aila-button-sm-font-family:                 var(--label-md-font-family);
  --aila-button-sm-font-size:                   var(--label-md-font-size);
  --aila-button-sm-font-weight:                 var(--label-md-font-weight);
  --aila-button-sm-line-height:                 var(--label-md-line-height);

  /* ------------------------------------------------------------
     Size: md
     ------------------------------------------------------------ */
  --aila-button-md-padding-x:                   var(--spacing-3-5);
  --aila-button-md-padding-y:                   var(--spacing-2-5);
  --aila-button-md-padding-left-icon-start:     var(--spacing-2-5);
  --aila-button-md-padding-right-icon-start:    var(--spacing-3-5);
  --aila-button-md-padding-left-icon-end:       var(--spacing-3-5);
  --aila-button-md-padding-right-icon-end:      var(--spacing-2-5);
  --aila-button-md-padding-x-icon-only:         var(--spacing-2-5);
  --aila-button-md-padding-y-icon-only:         var(--spacing-2-5);
  --aila-button-md-border-radius:               var(--rounded-full);
  --aila-button-md-gap:                         var(--spacing-1-5);
  --aila-button-md-icon-size:                   var(--icon-5);
  /* Font (label-lg) */
  --aila-button-md-font-family:                 var(--label-lg-font-family);
  --aila-button-md-font-size:                   var(--label-lg-font-size);
  --aila-button-md-font-weight:                 var(--label-lg-font-weight);
  --aila-button-md-line-height:                 var(--label-lg-line-height);

  /* ------------------------------------------------------------
     Size: lg
     ------------------------------------------------------------ */
  --aila-button-lg-padding-x:                   var(--spacing-4);
  --aila-button-lg-padding-y:                   var(--spacing-3);
  --aila-button-lg-padding-left-icon-start:     var(--spacing-3);
  --aila-button-lg-padding-right-icon-start:    var(--spacing-4);
  --aila-button-lg-padding-left-icon-end:       var(--spacing-4);
  --aila-button-lg-padding-right-icon-end:      var(--spacing-3);
  --aila-button-lg-padding-x-icon-only:         var(--spacing-3);
  --aila-button-lg-padding-y-icon-only:         var(--spacing-3);
  --aila-button-lg-border-radius:               var(--rounded-full);
  --aila-button-lg-gap:                         var(--spacing-1-5);
  --aila-button-lg-icon-size:                   var(--icon-6);
  /* Font (label-xl — corrected from source spec) */
  --aila-button-lg-font-family:                 var(--label-xl-font-family);
  --aila-button-lg-font-size:                   var(--label-xl-font-size);
  --aila-button-lg-font-weight:                 var(--label-xl-font-weight);
  --aila-button-lg-line-height:                 var(--label-xl-line-height);

  /* ============================================================
     NEUTRAL FAMILY
     ============================================================ */

  /* neutral (solid) */
  --aila-button-neutral-bg-default:      var(--neutral-action);
  --aila-button-neutral-bg-hover:        var(--neutral-action-hover);
  --aila-button-neutral-bg-active:       var(--neutral-action);
  --aila-button-neutral-bg-disabled:     var(--disabled-font);
  --aila-button-neutral-text-default:    var(--invert);
  --aila-button-neutral-text-hover:      var(--invert);
  --aila-button-neutral-text-active:     var(--invert);
  --aila-button-neutral-text-disabled:   var(--invert);
  --aila-button-neutral-icon-default:    var(--invert);
  --aila-button-neutral-icon-hover:      var(--invert);
  --aila-button-neutral-icon-active:     var(--invert);
  --aila-button-neutral-icon-disabled:   var(--invert);
  --aila-button-neutral-border-default:  transparent;
  --aila-button-neutral-border-hover:    transparent;
  --aila-button-neutral-border-active:   transparent;
  --aila-button-neutral-border-disabled: transparent;
  --aila-button-neutral-ring-focus-visible: var(--neutral-action);

  /* neutral-outlined */
  --aila-button-neutral-outlined-bg-default:      transparent;
  --aila-button-neutral-outlined-bg-hover:        var(--neutral-tonal-hover);
  --aila-button-neutral-outlined-bg-active:       transparent;
  --aila-button-neutral-outlined-bg-disabled:     transparent;
  --aila-button-neutral-outlined-text-default:    var(--neutral-action);
  --aila-button-neutral-outlined-text-hover:      var(--neutral-action-hover);
  --aila-button-neutral-outlined-text-active:     var(--neutral-action);
  --aila-button-neutral-outlined-text-disabled:   var(--disabled-font);
  --aila-button-neutral-outlined-icon-default:    var(--neutral-action);
  --aila-button-neutral-outlined-icon-hover:      var(--neutral-action-hover);
  --aila-button-neutral-outlined-icon-active:     var(--neutral-action);
  --aila-button-neutral-outlined-icon-disabled:   var(--disabled-font);
  --aila-button-neutral-outlined-border-default:  var(--neutral-action);
  --aila-button-neutral-outlined-border-hover:    var(--neutral-action-hover);
  --aila-button-neutral-outlined-border-active:   var(--neutral-action);
  --aila-button-neutral-outlined-border-disabled: var(--disabled-font);
  --aila-button-neutral-outlined-ring-focus-visible: var(--neutral-tonal-hover);

  /* neutral-link */
  --aila-button-neutral-link-bg-default:      transparent;
  --aila-button-neutral-link-bg-hover:        var(--neutral-tonal-hover);
  --aila-button-neutral-link-bg-active:       transparent;
  --aila-button-neutral-link-bg-disabled:     transparent;
  --aila-button-neutral-link-text-default:    var(--neutral-action);
  --aila-button-neutral-link-text-hover:      var(--neutral-action-hover);
  --aila-button-neutral-link-text-active:     var(--neutral-action);
  --aila-button-neutral-link-text-disabled:   var(--disabled-font);
  --aila-button-neutral-link-icon-default:    var(--neutral-action);
  --aila-button-neutral-link-icon-hover:      var(--neutral-action-hover);
  --aila-button-neutral-link-icon-active:     var(--neutral-action);
  --aila-button-neutral-link-icon-disabled:   var(--disabled-font);
  --aila-button-neutral-link-border-default:  transparent;
  --aila-button-neutral-link-border-hover:    transparent;
  --aila-button-neutral-link-border-active:   transparent;
  --aila-button-neutral-link-border-disabled: transparent;
  --aila-button-neutral-link-ring-focus-visible: var(--neutral-tonal-hover);

  /* ============================================================
     PRIMARY FAMILY
     ============================================================ */

  /* primary (solid) */
  --aila-button-primary-bg-default:      var(--primary-action);
  --aila-button-primary-bg-hover:        var(--primary-action-hover);
  --aila-button-primary-bg-active:       var(--primary-action);
  --aila-button-primary-bg-disabled:     var(--disabled-font);
  --aila-button-primary-text-default:    var(--invert);
  --aila-button-primary-text-hover:      var(--invert);
  --aila-button-primary-text-active:     var(--invert);
  --aila-button-primary-text-disabled:   var(--invert);
  --aila-button-primary-icon-default:    var(--invert);
  --aila-button-primary-icon-hover:      var(--invert);
  --aila-button-primary-icon-active:     var(--invert);
  --aila-button-primary-icon-disabled:   var(--invert);
  --aila-button-primary-border-default:  transparent;
  --aila-button-primary-border-hover:    transparent;
  --aila-button-primary-border-active:   transparent;
  --aila-button-primary-border-disabled: transparent;
  --aila-button-primary-ring-focus-visible: var(--primary-action);

  /* primary-outlined */
  --aila-button-primary-outlined-bg-default:      transparent;
  --aila-button-primary-outlined-bg-hover:        var(--primary-tonal-hover);
  --aila-button-primary-outlined-bg-active:       transparent;
  --aila-button-primary-outlined-bg-disabled:     transparent;
  --aila-button-primary-outlined-text-default:    var(--primary-action);
  --aila-button-primary-outlined-text-hover:      var(--primary-action-hover);
  --aila-button-primary-outlined-text-active:     var(--primary-action);
  --aila-button-primary-outlined-text-disabled:   var(--disabled-font);
  --aila-button-primary-outlined-icon-default:    var(--primary-action);
  --aila-button-primary-outlined-icon-hover:      var(--primary-action-hover);
  --aila-button-primary-outlined-icon-active:     var(--primary-action);
  --aila-button-primary-outlined-icon-disabled:   var(--disabled-font);
  --aila-button-primary-outlined-border-default:  var(--primary-action);
  --aila-button-primary-outlined-border-hover:    var(--primary-action-hover);
  --aila-button-primary-outlined-border-active:   var(--primary-action);
  --aila-button-primary-outlined-border-disabled: var(--disabled-font);
  --aila-button-primary-outlined-ring-focus-visible: var(--primary-tonal-hover);

  /* primary-link */
  --aila-button-primary-link-bg-default:      transparent;
  --aila-button-primary-link-bg-hover:        var(--primary-tonal-hover);
  --aila-button-primary-link-bg-active:       transparent;
  --aila-button-primary-link-bg-disabled:     transparent;
  --aila-button-primary-link-text-default:    var(--primary-action);
  --aila-button-primary-link-text-hover:      var(--primary-action-hover);
  --aila-button-primary-link-text-active:     var(--primary-action);
  --aila-button-primary-link-text-disabled:   var(--disabled-font);
  --aila-button-primary-link-icon-default:    var(--primary-action);
  --aila-button-primary-link-icon-hover:      var(--primary-action-hover);
  --aila-button-primary-link-icon-active:     var(--primary-action);
  --aila-button-primary-link-icon-disabled:   var(--disabled-font);
  --aila-button-primary-link-border-default:  transparent;
  --aila-button-primary-link-border-hover:    transparent;
  --aila-button-primary-link-border-active:   transparent;
  --aila-button-primary-link-border-disabled: transparent;
  --aila-button-primary-link-ring-focus-visible: var(--primary-tonal-hover);

  /* ============================================================
     DANGER FAMILY
     ============================================================ */

  /* danger (solid) */
  --aila-button-danger-bg-default:      var(--danger-action);
  --aila-button-danger-bg-hover:        var(--danger-action-hover);
  --aila-button-danger-bg-active:       var(--danger-action);
  --aila-button-danger-bg-disabled:     var(--disabled-font);
  --aila-button-danger-text-default:    var(--invert);
  --aila-button-danger-text-hover:      var(--invert);
  --aila-button-danger-text-active:     var(--invert);
  --aila-button-danger-text-disabled:   var(--invert);
  --aila-button-danger-icon-default:    var(--invert);
  --aila-button-danger-icon-hover:      var(--invert);
  --aila-button-danger-icon-active:     var(--invert);
  --aila-button-danger-icon-disabled:   var(--invert);
  --aila-button-danger-border-default:  transparent;
  --aila-button-danger-border-hover:    transparent;
  --aila-button-danger-border-active:   transparent;
  --aila-button-danger-border-disabled: transparent;
  --aila-button-danger-ring-focus-visible: var(--danger-action);

  /* danger-outlined */
  --aila-button-danger-outlined-bg-default:      transparent;
  --aila-button-danger-outlined-bg-hover:        var(--danger-tonal-hover);
  --aila-button-danger-outlined-bg-active:       transparent;
  --aila-button-danger-outlined-bg-disabled:     transparent;
  --aila-button-danger-outlined-text-default:    var(--danger-action);
  --aila-button-danger-outlined-text-hover:      var(--danger-action-hover);
  --aila-button-danger-outlined-text-active:     var(--danger-action);
  --aila-button-danger-outlined-text-disabled:   var(--disabled-font);
  --aila-button-danger-outlined-icon-default:    var(--danger-action);
  --aila-button-danger-outlined-icon-hover:      var(--danger-action-hover);
  --aila-button-danger-outlined-icon-active:     var(--danger-action);
  --aila-button-danger-outlined-icon-disabled:   var(--disabled-font);
  --aila-button-danger-outlined-border-default:  var(--danger-action);
  --aila-button-danger-outlined-border-hover:    var(--danger-action-hover);
  --aila-button-danger-outlined-border-active:   var(--danger-action);
  --aila-button-danger-outlined-border-disabled: var(--disabled-font);
  --aila-button-danger-outlined-ring-focus-visible: var(--danger-tonal-hover);

  /* danger-link */
  --aila-button-danger-link-bg-default:      transparent;
  --aila-button-danger-link-bg-hover:        var(--danger-tonal-hover);
  --aila-button-danger-link-bg-active:       transparent;
  --aila-button-danger-link-bg-disabled:     transparent;
  --aila-button-danger-link-text-default:    var(--danger-action);
  --aila-button-danger-link-text-hover:      var(--danger-action-hover);
  --aila-button-danger-link-text-active:     var(--danger-action);
  --aila-button-danger-link-text-disabled:   var(--disabled-font);
  --aila-button-danger-link-icon-default:    var(--danger-action);
  --aila-button-danger-link-icon-hover:      var(--danger-action-hover);
  --aila-button-danger-link-icon-active:     var(--danger-action);
  --aila-button-danger-link-icon-disabled:   var(--disabled-font);
  --aila-button-danger-link-border-default:  transparent;
  --aila-button-danger-link-border-hover:    transparent;
  --aila-button-danger-link-border-active:   transparent;
  --aila-button-danger-link-border-disabled: transparent;
  --aila-button-danger-link-ring-focus-visible: var(--danger-tonal-hover);

  /* ============================================================
     WARNING FAMILY
     ============================================================ */

  /* warning (solid) */
  --aila-button-warning-bg-default:      var(--warning-action);
  --aila-button-warning-bg-hover:        var(--warning-action-hover);
  --aila-button-warning-bg-active:       var(--warning-action);
  --aila-button-warning-bg-disabled:     var(--disabled-font);
  --aila-button-warning-text-default:    var(--invert);
  --aila-button-warning-text-hover:      var(--invert);
  --aila-button-warning-text-active:     var(--invert);
  --aila-button-warning-text-disabled:   var(--invert);
  --aila-button-warning-icon-default:    var(--invert);
  --aila-button-warning-icon-hover:      var(--invert);
  --aila-button-warning-icon-active:     var(--invert);
  --aila-button-warning-icon-disabled:   var(--invert);
  --aila-button-warning-border-default:  transparent;
  --aila-button-warning-border-hover:    transparent;
  --aila-button-warning-border-active:   transparent;
  --aila-button-warning-border-disabled: transparent;
  --aila-button-warning-ring-focus-visible: var(--warning-action);

  /* warning-outlined */
  --aila-button-warning-outlined-bg-default:      transparent;
  --aila-button-warning-outlined-bg-hover:        var(--warning-tonal-hover);
  --aila-button-warning-outlined-bg-active:       transparent;
  --aila-button-warning-outlined-bg-disabled:     transparent;
  --aila-button-warning-outlined-text-default:    var(--warning-action);
  --aila-button-warning-outlined-text-hover:      var(--warning-action-hover);
  --aila-button-warning-outlined-text-active:     var(--warning-action);
  --aila-button-warning-outlined-text-disabled:   var(--disabled-font);
  --aila-button-warning-outlined-icon-default:    var(--warning-action);
  --aila-button-warning-outlined-icon-hover:      var(--warning-action-hover);
  --aila-button-warning-outlined-icon-active:     var(--warning-action);
  --aila-button-warning-outlined-icon-disabled:   var(--disabled-font);
  --aila-button-warning-outlined-border-default:  var(--warning-action);
  --aila-button-warning-outlined-border-hover:    var(--warning-action-hover);
  --aila-button-warning-outlined-border-active:   var(--warning-action);
  --aila-button-warning-outlined-border-disabled: var(--disabled-font);
  --aila-button-warning-outlined-ring-focus-visible: var(--warning-tonal-hover);

  /* warning-link */
  --aila-button-warning-link-bg-default:      transparent;
  --aila-button-warning-link-bg-hover:        var(--warning-tonal-hover);
  --aila-button-warning-link-bg-active:       transparent;
  --aila-button-warning-link-bg-disabled:     transparent;
  --aila-button-warning-link-text-default:    var(--warning-action);
  --aila-button-warning-link-text-hover:      var(--warning-action-hover);
  --aila-button-warning-link-text-active:     var(--warning-action);
  --aila-button-warning-link-text-disabled:   var(--disabled-font);
  --aila-button-warning-link-icon-default:    var(--warning-action);
  --aila-button-warning-link-icon-hover:      var(--warning-action-hover);
  --aila-button-warning-link-icon-active:     var(--warning-action);
  --aila-button-warning-link-icon-disabled:   var(--disabled-font);
  --aila-button-warning-link-border-default:  transparent;
  --aila-button-warning-link-border-hover:    transparent;
  --aila-button-warning-link-border-active:   transparent;
  --aila-button-warning-link-border-disabled: transparent;
  --aila-button-warning-link-ring-focus-visible: var(--warning-tonal-hover);

  /* ============================================================
     SUCCESS FAMILY
     ============================================================ */

  /* success (solid) */
  --aila-button-success-bg-default:      var(--success-action);
  --aila-button-success-bg-hover:        var(--success-action-hover);
  --aila-button-success-bg-active:       var(--success-action);
  --aila-button-success-bg-disabled:     var(--disabled-font);
  --aila-button-success-text-default:    var(--invert);
  --aila-button-success-text-hover:      var(--invert);
  --aila-button-success-text-active:     var(--invert);
  --aila-button-success-text-disabled:   var(--invert);
  --aila-button-success-icon-default:    var(--invert);
  --aila-button-success-icon-hover:      var(--invert);
  --aila-button-success-icon-active:     var(--invert);
  --aila-button-success-icon-disabled:   var(--invert);
  --aila-button-success-border-default:  transparent;
  --aila-button-success-border-hover:    transparent;
  --aila-button-success-border-active:   transparent;
  --aila-button-success-border-disabled: transparent;
  --aila-button-success-ring-focus-visible: var(--success-action);

  /* success-outlined */
  --aila-button-success-outlined-bg-default:      transparent;
  --aila-button-success-outlined-bg-hover:        var(--success-tonal-hover);
  --aila-button-success-outlined-bg-active:       transparent;
  --aila-button-success-outlined-bg-disabled:     transparent;
  --aila-button-success-outlined-text-default:    var(--success-action);
  --aila-button-success-outlined-text-hover:      var(--success-action-hover);
  --aila-button-success-outlined-text-active:     var(--success-action);
  --aila-button-success-outlined-text-disabled:   var(--disabled-font);
  --aila-button-success-outlined-icon-default:    var(--success-action);
  --aila-button-success-outlined-icon-hover:      var(--success-action-hover);
  --aila-button-success-outlined-icon-active:     var(--success-action);
  --aila-button-success-outlined-icon-disabled:   var(--disabled-font);
  --aila-button-success-outlined-border-default:  var(--success-action);
  --aila-button-success-outlined-border-hover:    var(--success-action-hover);
  --aila-button-success-outlined-border-active:   var(--success-action);
  --aila-button-success-outlined-border-disabled: var(--disabled-font);
  --aila-button-success-outlined-ring-focus-visible: var(--success-tonal-hover);

  /* success-link */
  --aila-button-success-link-bg-default:      transparent;
  --aila-button-success-link-bg-hover:        var(--success-tonal-hover);
  --aila-button-success-link-bg-active:       transparent;
  --aila-button-success-link-bg-disabled:     transparent;
  --aila-button-success-link-text-default:    var(--success-action);
  --aila-button-success-link-text-hover:      var(--success-action-hover);
  --aila-button-success-link-text-active:     var(--success-action);
  --aila-button-success-link-text-disabled:   var(--disabled-font);
  --aila-button-success-link-icon-default:    var(--success-action);
  --aila-button-success-link-icon-hover:      var(--success-action-hover);
  --aila-button-success-link-icon-active:     var(--success-action);
  --aila-button-success-link-icon-disabled:   var(--disabled-font);
  --aila-button-success-link-border-default:  transparent;
  --aila-button-success-link-border-hover:    transparent;
  --aila-button-success-link-border-active:   transparent;
  --aila-button-success-link-border-disabled: transparent;
  --aila-button-success-link-ring-focus-visible: var(--success-tonal-hover);
}

/* ============================================================
   Button element
   ------------------------------------------------------------
   Usage:
     <button class="btn" data-variant="primary" data-size="md">
       <svg class="btn-icon" …/><span>Label</span>
     </button>

   data-variant: neutral | neutral-outlined | neutral-link
                 primary | primary-outlined | primary-link
                 danger  | danger-outlined  | danger-link
                 warning | warning-outlined | warning-link
                 success | success-outlined | success-link

   data-size:    sm | md | lg

   Modifiers (data-state): default | hover | active | disabled
   Setting data-state forces that state's styling (for the
   showcase matrix). Omit to use real :hover/:active/[disabled].
   ============================================================ */

.btn {
  --_bg:       var(--aila-button-neutral-bg-default);
  --_bg-h:     var(--aila-button-neutral-bg-hover);
  --_bg-a:     var(--aila-button-neutral-bg-active);
  --_bg-d:     var(--aila-button-neutral-bg-disabled);
  --_text:     var(--aila-button-neutral-text-default);
  --_text-h:   var(--aila-button-neutral-text-hover);
  --_text-a:   var(--aila-button-neutral-text-active);
  --_text-d:   var(--aila-button-neutral-text-disabled);
  --_icon:     var(--aila-button-neutral-icon-default);
  --_icon-h:   var(--aila-button-neutral-icon-hover);
  --_icon-a:   var(--aila-button-neutral-icon-active);
  --_icon-d:   var(--aila-button-neutral-icon-disabled);
  --_bd:       var(--aila-button-neutral-border-default);
  --_bd-h:     var(--aila-button-neutral-border-hover);
  --_bd-a:     var(--aila-button-neutral-border-active);
  --_bd-d:     var(--aila-button-neutral-border-disabled);
  --_ring:     var(--aila-button-neutral-ring-focus-visible);

  /* Size defaults to md */
  --_pad-x:      var(--aila-button-md-padding-x);
  --_pad-y:      var(--aila-button-md-padding-y);
  --_pad-l-is:   var(--aila-button-md-padding-left-icon-start);
  --_pad-r-is:   var(--aila-button-md-padding-right-icon-start);
  --_pad-l-ie:   var(--aila-button-md-padding-left-icon-end);
  --_pad-r-ie:   var(--aila-button-md-padding-right-icon-end);
  --_pad-x-io:   var(--aila-button-md-padding-x-icon-only);
  --_pad-y-io:   var(--aila-button-md-padding-y-icon-only);
  --_radius:     var(--aila-button-md-border-radius);
  --_gap:        var(--aila-button-md-gap);
  --_icon-size:  var(--aila-button-md-icon-size);
  --_font-family: var(--aila-button-md-font-family);
  --_font-size:   var(--aila-button-md-font-size);
  --_font-weight: var(--aila-button-md-font-weight);
  --_line-height: var(--aila-button-md-line-height);

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_gap);
  padding: var(--_pad-y) var(--_pad-x);
  border: var(--aila-button-border-width) solid var(--_bd);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_text);
  font-family: var(--_font-family);
  font-size: var(--_font-size);
  font-weight: var(--_font-weight);
  line-height: var(--_line-height);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: var(--aila-button-transition);
  -webkit-tap-highlight-color: transparent;
}

.btn .btn-icon {
  width: var(--_icon-size);
  height: var(--_icon-size);
  color: var(--_icon);
  flex: 0 0 auto;
  stroke-width: 1.75;
}

/* Asymmetric padding when icon is at start or end */
.btn[data-icon="start"] { padding-left: var(--_pad-l-is); padding-right: var(--_pad-r-is); }
.btn[data-icon="end"]   { padding-left: var(--_pad-l-ie); padding-right: var(--_pad-r-ie); }
.btn[data-icon="only"]  { padding: var(--_pad-y-io) var(--_pad-x-io); }

/* ------- Size modifiers ------- */
.btn[data-size="sm"] {
  --_pad-x:      var(--aila-button-sm-padding-x);
  --_pad-y:      var(--aila-button-sm-padding-y);
  --_pad-l-is:   var(--aila-button-sm-padding-left-icon-start);
  --_pad-r-is:   var(--aila-button-sm-padding-right-icon-start);
  --_pad-l-ie:   var(--aila-button-sm-padding-left-icon-end);
  --_pad-r-ie:   var(--aila-button-sm-padding-right-icon-end);
  --_pad-x-io:   var(--aila-button-sm-padding-x-icon-only);
  --_pad-y-io:   var(--aila-button-sm-padding-y-icon-only);
  --_radius:     var(--aila-button-sm-border-radius);
  --_gap:        var(--aila-button-sm-gap);
  --_icon-size:  var(--aila-button-sm-icon-size);
  --_font-family: var(--aila-button-sm-font-family);
  --_font-size:   var(--aila-button-sm-font-size);
  --_font-weight: var(--aila-button-sm-font-weight);
  --_line-height: var(--aila-button-sm-line-height);
}
.btn[data-size="lg"] {
  --_pad-x:      var(--aila-button-lg-padding-x);
  --_pad-y:      var(--aila-button-lg-padding-y);
  --_pad-l-is:   var(--aila-button-lg-padding-left-icon-start);
  --_pad-r-is:   var(--aila-button-lg-padding-right-icon-start);
  --_pad-l-ie:   var(--aila-button-lg-padding-left-icon-end);
  --_pad-r-ie:   var(--aila-button-lg-padding-right-icon-end);
  --_pad-x-io:   var(--aila-button-lg-padding-x-icon-only);
  --_pad-y-io:   var(--aila-button-lg-padding-y-icon-only);
  --_radius:     var(--aila-button-lg-border-radius);
  --_gap:        var(--aila-button-lg-gap);
  --_icon-size:  var(--aila-button-lg-icon-size);
  --_font-family: var(--aila-button-lg-font-family);
  --_font-size:   var(--aila-button-lg-font-size);
  --_font-weight: var(--aila-button-lg-font-weight);
  --_line-height: var(--aila-button-lg-line-height);
}

/* ------- Variant bindings (generated for 15 variants) ------- */

.btn[data-variant="neutral"] {
  --_bg:     var(--aila-button-neutral-bg-default);
  --_bg-h:   var(--aila-button-neutral-bg-hover);
  --_bg-a:   var(--aila-button-neutral-bg-active);
  --_bg-d:   var(--aila-button-neutral-bg-disabled);
  --_text:   var(--aila-button-neutral-text-default);
  --_text-h: var(--aila-button-neutral-text-hover);
  --_text-a: var(--aila-button-neutral-text-active);
  --_text-d: var(--aila-button-neutral-text-disabled);
  --_icon:   var(--aila-button-neutral-icon-default);
  --_icon-h: var(--aila-button-neutral-icon-hover);
  --_icon-a: var(--aila-button-neutral-icon-active);
  --_icon-d: var(--aila-button-neutral-icon-disabled);
  --_bd:     var(--aila-button-neutral-border-default);
  --_bd-h:   var(--aila-button-neutral-border-hover);
  --_bd-a:   var(--aila-button-neutral-border-active);
  --_bd-d:   var(--aila-button-neutral-border-disabled);
  --_ring:   var(--aila-button-neutral-ring-focus-visible);
}

.btn[data-variant="neutral-outlined"] {
  --_bg:     var(--aila-button-neutral-outlined-bg-default);
  --_bg-h:   var(--aila-button-neutral-outlined-bg-hover);
  --_bg-a:   var(--aila-button-neutral-outlined-bg-active);
  --_bg-d:   var(--aila-button-neutral-outlined-bg-disabled);
  --_text:   var(--aila-button-neutral-outlined-text-default);
  --_text-h: var(--aila-button-neutral-outlined-text-hover);
  --_text-a: var(--aila-button-neutral-outlined-text-active);
  --_text-d: var(--aila-button-neutral-outlined-text-disabled);
  --_icon:   var(--aila-button-neutral-outlined-icon-default);
  --_icon-h: var(--aila-button-neutral-outlined-icon-hover);
  --_icon-a: var(--aila-button-neutral-outlined-icon-active);
  --_icon-d: var(--aila-button-neutral-outlined-icon-disabled);
  --_bd:     var(--aila-button-neutral-outlined-border-default);
  --_bd-h:   var(--aila-button-neutral-outlined-border-hover);
  --_bd-a:   var(--aila-button-neutral-outlined-border-active);
  --_bd-d:   var(--aila-button-neutral-outlined-border-disabled);
  --_ring:   var(--aila-button-neutral-outlined-ring-focus-visible);
}

.btn[data-variant="neutral-link"] {
  --_bg:     var(--aila-button-neutral-link-bg-default);
  --_bg-h:   var(--aila-button-neutral-link-bg-hover);
  --_bg-a:   var(--aila-button-neutral-link-bg-active);
  --_bg-d:   var(--aila-button-neutral-link-bg-disabled);
  --_text:   var(--aila-button-neutral-link-text-default);
  --_text-h: var(--aila-button-neutral-link-text-hover);
  --_text-a: var(--aila-button-neutral-link-text-active);
  --_text-d: var(--aila-button-neutral-link-text-disabled);
  --_icon:   var(--aila-button-neutral-link-icon-default);
  --_icon-h: var(--aila-button-neutral-link-icon-hover);
  --_icon-a: var(--aila-button-neutral-link-icon-active);
  --_icon-d: var(--aila-button-neutral-link-icon-disabled);
  --_bd:     var(--aila-button-neutral-link-border-default);
  --_bd-h:   var(--aila-button-neutral-link-border-hover);
  --_bd-a:   var(--aila-button-neutral-link-border-active);
  --_bd-d:   var(--aila-button-neutral-link-border-disabled);
  --_ring:   var(--aila-button-neutral-link-ring-focus-visible);
}

.btn[data-variant="primary"] {
  --_bg:     var(--aila-button-primary-bg-default);
  --_bg-h:   var(--aila-button-primary-bg-hover);
  --_bg-a:   var(--aila-button-primary-bg-active);
  --_bg-d:   var(--aila-button-primary-bg-disabled);
  --_text:   var(--aila-button-primary-text-default);
  --_text-h: var(--aila-button-primary-text-hover);
  --_text-a: var(--aila-button-primary-text-active);
  --_text-d: var(--aila-button-primary-text-disabled);
  --_icon:   var(--aila-button-primary-icon-default);
  --_icon-h: var(--aila-button-primary-icon-hover);
  --_icon-a: var(--aila-button-primary-icon-active);
  --_icon-d: var(--aila-button-primary-icon-disabled);
  --_bd:     var(--aila-button-primary-border-default);
  --_bd-h:   var(--aila-button-primary-border-hover);
  --_bd-a:   var(--aila-button-primary-border-active);
  --_bd-d:   var(--aila-button-primary-border-disabled);
  --_ring:   var(--aila-button-primary-ring-focus-visible);
}

.btn[data-variant="primary-outlined"] {
  --_bg:     var(--aila-button-primary-outlined-bg-default);
  --_bg-h:   var(--aila-button-primary-outlined-bg-hover);
  --_bg-a:   var(--aila-button-primary-outlined-bg-active);
  --_bg-d:   var(--aila-button-primary-outlined-bg-disabled);
  --_text:   var(--aila-button-primary-outlined-text-default);
  --_text-h: var(--aila-button-primary-outlined-text-hover);
  --_text-a: var(--aila-button-primary-outlined-text-active);
  --_text-d: var(--aila-button-primary-outlined-text-disabled);
  --_icon:   var(--aila-button-primary-outlined-icon-default);
  --_icon-h: var(--aila-button-primary-outlined-icon-hover);
  --_icon-a: var(--aila-button-primary-outlined-icon-active);
  --_icon-d: var(--aila-button-primary-outlined-icon-disabled);
  --_bd:     var(--aila-button-primary-outlined-border-default);
  --_bd-h:   var(--aila-button-primary-outlined-border-hover);
  --_bd-a:   var(--aila-button-primary-outlined-border-active);
  --_bd-d:   var(--aila-button-primary-outlined-border-disabled);
  --_ring:   var(--aila-button-primary-outlined-ring-focus-visible);
}

.btn[data-variant="primary-link"] {
  --_bg:     var(--aila-button-primary-link-bg-default);
  --_bg-h:   var(--aila-button-primary-link-bg-hover);
  --_bg-a:   var(--aila-button-primary-link-bg-active);
  --_bg-d:   var(--aila-button-primary-link-bg-disabled);
  --_text:   var(--aila-button-primary-link-text-default);
  --_text-h: var(--aila-button-primary-link-text-hover);
  --_text-a: var(--aila-button-primary-link-text-active);
  --_text-d: var(--aila-button-primary-link-text-disabled);
  --_icon:   var(--aila-button-primary-link-icon-default);
  --_icon-h: var(--aila-button-primary-link-icon-hover);
  --_icon-a: var(--aila-button-primary-link-icon-active);
  --_icon-d: var(--aila-button-primary-link-icon-disabled);
  --_bd:     var(--aila-button-primary-link-border-default);
  --_bd-h:   var(--aila-button-primary-link-border-hover);
  --_bd-a:   var(--aila-button-primary-link-border-active);
  --_bd-d:   var(--aila-button-primary-link-border-disabled);
  --_ring:   var(--aila-button-primary-link-ring-focus-visible);
}

.btn[data-variant="danger"] {
  --_bg:     var(--aila-button-danger-bg-default);
  --_bg-h:   var(--aila-button-danger-bg-hover);
  --_bg-a:   var(--aila-button-danger-bg-active);
  --_bg-d:   var(--aila-button-danger-bg-disabled);
  --_text:   var(--aila-button-danger-text-default);
  --_text-h: var(--aila-button-danger-text-hover);
  --_text-a: var(--aila-button-danger-text-active);
  --_text-d: var(--aila-button-danger-text-disabled);
  --_icon:   var(--aila-button-danger-icon-default);
  --_icon-h: var(--aila-button-danger-icon-hover);
  --_icon-a: var(--aila-button-danger-icon-active);
  --_icon-d: var(--aila-button-danger-icon-disabled);
  --_bd:     var(--aila-button-danger-border-default);
  --_bd-h:   var(--aila-button-danger-border-hover);
  --_bd-a:   var(--aila-button-danger-border-active);
  --_bd-d:   var(--aila-button-danger-border-disabled);
  --_ring:   var(--aila-button-danger-ring-focus-visible);
}

.btn[data-variant="danger-outlined"] {
  --_bg:     var(--aila-button-danger-outlined-bg-default);
  --_bg-h:   var(--aila-button-danger-outlined-bg-hover);
  --_bg-a:   var(--aila-button-danger-outlined-bg-active);
  --_bg-d:   var(--aila-button-danger-outlined-bg-disabled);
  --_text:   var(--aila-button-danger-outlined-text-default);
  --_text-h: var(--aila-button-danger-outlined-text-hover);
  --_text-a: var(--aila-button-danger-outlined-text-active);
  --_text-d: var(--aila-button-danger-outlined-text-disabled);
  --_icon:   var(--aila-button-danger-outlined-icon-default);
  --_icon-h: var(--aila-button-danger-outlined-icon-hover);
  --_icon-a: var(--aila-button-danger-outlined-icon-active);
  --_icon-d: var(--aila-button-danger-outlined-icon-disabled);
  --_bd:     var(--aila-button-danger-outlined-border-default);
  --_bd-h:   var(--aila-button-danger-outlined-border-hover);
  --_bd-a:   var(--aila-button-danger-outlined-border-active);
  --_bd-d:   var(--aila-button-danger-outlined-border-disabled);
  --_ring:   var(--aila-button-danger-outlined-ring-focus-visible);
}

.btn[data-variant="danger-link"] {
  --_bg:     var(--aila-button-danger-link-bg-default);
  --_bg-h:   var(--aila-button-danger-link-bg-hover);
  --_bg-a:   var(--aila-button-danger-link-bg-active);
  --_bg-d:   var(--aila-button-danger-link-bg-disabled);
  --_text:   var(--aila-button-danger-link-text-default);
  --_text-h: var(--aila-button-danger-link-text-hover);
  --_text-a: var(--aila-button-danger-link-text-active);
  --_text-d: var(--aila-button-danger-link-text-disabled);
  --_icon:   var(--aila-button-danger-link-icon-default);
  --_icon-h: var(--aila-button-danger-link-icon-hover);
  --_icon-a: var(--aila-button-danger-link-icon-active);
  --_icon-d: var(--aila-button-danger-link-icon-disabled);
  --_bd:     var(--aila-button-danger-link-border-default);
  --_bd-h:   var(--aila-button-danger-link-border-hover);
  --_bd-a:   var(--aila-button-danger-link-border-active);
  --_bd-d:   var(--aila-button-danger-link-border-disabled);
  --_ring:   var(--aila-button-danger-link-ring-focus-visible);
}

.btn[data-variant="warning"] {
  --_bg:     var(--aila-button-warning-bg-default);
  --_bg-h:   var(--aila-button-warning-bg-hover);
  --_bg-a:   var(--aila-button-warning-bg-active);
  --_bg-d:   var(--aila-button-warning-bg-disabled);
  --_text:   var(--aila-button-warning-text-default);
  --_text-h: var(--aila-button-warning-text-hover);
  --_text-a: var(--aila-button-warning-text-active);
  --_text-d: var(--aila-button-warning-text-disabled);
  --_icon:   var(--aila-button-warning-icon-default);
  --_icon-h: var(--aila-button-warning-icon-hover);
  --_icon-a: var(--aila-button-warning-icon-active);
  --_icon-d: var(--aila-button-warning-icon-disabled);
  --_bd:     var(--aila-button-warning-border-default);
  --_bd-h:   var(--aila-button-warning-border-hover);
  --_bd-a:   var(--aila-button-warning-border-active);
  --_bd-d:   var(--aila-button-warning-border-disabled);
  --_ring:   var(--aila-button-warning-ring-focus-visible);
}

.btn[data-variant="warning-outlined"] {
  --_bg:     var(--aila-button-warning-outlined-bg-default);
  --_bg-h:   var(--aila-button-warning-outlined-bg-hover);
  --_bg-a:   var(--aila-button-warning-outlined-bg-active);
  --_bg-d:   var(--aila-button-warning-outlined-bg-disabled);
  --_text:   var(--aila-button-warning-outlined-text-default);
  --_text-h: var(--aila-button-warning-outlined-text-hover);
  --_text-a: var(--aila-button-warning-outlined-text-active);
  --_text-d: var(--aila-button-warning-outlined-text-disabled);
  --_icon:   var(--aila-button-warning-outlined-icon-default);
  --_icon-h: var(--aila-button-warning-outlined-icon-hover);
  --_icon-a: var(--aila-button-warning-outlined-icon-active);
  --_icon-d: var(--aila-button-warning-outlined-icon-disabled);
  --_bd:     var(--aila-button-warning-outlined-border-default);
  --_bd-h:   var(--aila-button-warning-outlined-border-hover);
  --_bd-a:   var(--aila-button-warning-outlined-border-active);
  --_bd-d:   var(--aila-button-warning-outlined-border-disabled);
  --_ring:   var(--aila-button-warning-outlined-ring-focus-visible);
}

.btn[data-variant="warning-link"] {
  --_bg:     var(--aila-button-warning-link-bg-default);
  --_bg-h:   var(--aila-button-warning-link-bg-hover);
  --_bg-a:   var(--aila-button-warning-link-bg-active);
  --_bg-d:   var(--aila-button-warning-link-bg-disabled);
  --_text:   var(--aila-button-warning-link-text-default);
  --_text-h: var(--aila-button-warning-link-text-hover);
  --_text-a: var(--aila-button-warning-link-text-active);
  --_text-d: var(--aila-button-warning-link-text-disabled);
  --_icon:   var(--aila-button-warning-link-icon-default);
  --_icon-h: var(--aila-button-warning-link-icon-hover);
  --_icon-a: var(--aila-button-warning-link-icon-active);
  --_icon-d: var(--aila-button-warning-link-icon-disabled);
  --_bd:     var(--aila-button-warning-link-border-default);
  --_bd-h:   var(--aila-button-warning-link-border-hover);
  --_bd-a:   var(--aila-button-warning-link-border-active);
  --_bd-d:   var(--aila-button-warning-link-border-disabled);
  --_ring:   var(--aila-button-warning-link-ring-focus-visible);
}

.btn[data-variant="success"] {
  --_bg:     var(--aila-button-success-bg-default);
  --_bg-h:   var(--aila-button-success-bg-hover);
  --_bg-a:   var(--aila-button-success-bg-active);
  --_bg-d:   var(--aila-button-success-bg-disabled);
  --_text:   var(--aila-button-success-text-default);
  --_text-h: var(--aila-button-success-text-hover);
  --_text-a: var(--aila-button-success-text-active);
  --_text-d: var(--aila-button-success-text-disabled);
  --_icon:   var(--aila-button-success-icon-default);
  --_icon-h: var(--aila-button-success-icon-hover);
  --_icon-a: var(--aila-button-success-icon-active);
  --_icon-d: var(--aila-button-success-icon-disabled);
  --_bd:     var(--aila-button-success-border-default);
  --_bd-h:   var(--aila-button-success-border-hover);
  --_bd-a:   var(--aila-button-success-border-active);
  --_bd-d:   var(--aila-button-success-border-disabled);
  --_ring:   var(--aila-button-success-ring-focus-visible);
}

.btn[data-variant="success-outlined"] {
  --_bg:     var(--aila-button-success-outlined-bg-default);
  --_bg-h:   var(--aila-button-success-outlined-bg-hover);
  --_bg-a:   var(--aila-button-success-outlined-bg-active);
  --_bg-d:   var(--aila-button-success-outlined-bg-disabled);
  --_text:   var(--aila-button-success-outlined-text-default);
  --_text-h: var(--aila-button-success-outlined-text-hover);
  --_text-a: var(--aila-button-success-outlined-text-active);
  --_text-d: var(--aila-button-success-outlined-text-disabled);
  --_icon:   var(--aila-button-success-outlined-icon-default);
  --_icon-h: var(--aila-button-success-outlined-icon-hover);
  --_icon-a: var(--aila-button-success-outlined-icon-active);
  --_icon-d: var(--aila-button-success-outlined-icon-disabled);
  --_bd:     var(--aila-button-success-outlined-border-default);
  --_bd-h:   var(--aila-button-success-outlined-border-hover);
  --_bd-a:   var(--aila-button-success-outlined-border-active);
  --_bd-d:   var(--aila-button-success-outlined-border-disabled);
  --_ring:   var(--aila-button-success-outlined-ring-focus-visible);
}

.btn[data-variant="success-link"] {
  --_bg:     var(--aila-button-success-link-bg-default);
  --_bg-h:   var(--aila-button-success-link-bg-hover);
  --_bg-a:   var(--aila-button-success-link-bg-active);
  --_bg-d:   var(--aila-button-success-link-bg-disabled);
  --_text:   var(--aila-button-success-link-text-default);
  --_text-h: var(--aila-button-success-link-text-hover);
  --_text-a: var(--aila-button-success-link-text-active);
  --_text-d: var(--aila-button-success-link-text-disabled);
  --_icon:   var(--aila-button-success-link-icon-default);
  --_icon-h: var(--aila-button-success-link-icon-hover);
  --_icon-a: var(--aila-button-success-link-icon-active);
  --_icon-d: var(--aila-button-success-link-icon-disabled);
  --_bd:     var(--aila-button-success-link-border-default);
  --_bd-h:   var(--aila-button-success-link-border-hover);
  --_bd-a:   var(--aila-button-success-link-border-active);
  --_bd-d:   var(--aila-button-success-link-border-disabled);
  --_ring:   var(--aila-button-success-link-ring-focus-visible);
}

/* ============================================================
   State styling — real :hover/:active/:focus-visible/[disabled]
   ============================================================ */

.btn:hover {
  background: var(--_bg-h);
  color: var(--_text-h);
  border-color: var(--_bd-h);
}
.btn:hover .btn-icon { color: var(--_icon-h); }

.btn:active {
  background: var(--_bg-a);
  color: var(--_text-a);
  border-color: var(--_bd-a);
}
.btn:active .btn-icon { color: var(--_icon-a); }

.btn:focus-visible {
  outline: var(--aila-button-ring-width) solid var(--_ring);
  outline-offset: var(--aila-button-ring-offset);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--_bg-d);
  color: var(--_text-d);
  border-color: var(--_bd-d);
  cursor: not-allowed;
  pointer-events: none;
}
.btn[disabled] .btn-icon,
.btn[aria-disabled="true"] .btn-icon { color: var(--_icon-d); }

/* ============================================================
   Forced states — for showcase matrix
   data-state="hover|active|focus|disabled" pins visual state
   regardless of user interaction.
   ============================================================ */

.btn[data-state="default"] {
  background: var(--_bg);
  color: var(--_text);
  border-color: var(--_bd);
}
.btn[data-state="default"] .btn-icon { color: var(--_icon); }

.btn[data-state="hover"] {
  background: var(--_bg-h);
  color: var(--_text-h);
  border-color: var(--_bd-h);
}
.btn[data-state="hover"] .btn-icon { color: var(--_icon-h); }

.btn[data-state="active"] {
  background: var(--_bg-a);
  color: var(--_text-a);
  border-color: var(--_bd-a);
}
.btn[data-state="active"] .btn-icon { color: var(--_icon-a); }

.btn[data-state="focus"] {
  outline: var(--aila-button-ring-width) solid var(--_ring);
  outline-offset: var(--aila-button-ring-offset);
}

.btn[data-state="disabled"] {
  background: var(--_bg-d);
  color: var(--_text-d);
  border-color: var(--_bd-d);
  cursor: not-allowed;
}
.btn[data-state="disabled"] .btn-icon { color: var(--_icon-d); }