// packages/components/src/styles/components/button-vars.scss
// Layer2 - Button Component Variables
// 
// This file defines component-level CSS variables for the Button component.
// These variables can be overridden at runtime via AnimationBuilder.
//
// NOTE: Hover effects are handled by Glow wrapper, not here.
// Only base and active states are defined.

// ============================================
// Base Button Variables
// ============================================

.hi-button {
  // ============================================
  // 1. Color System
  // ============================================
  
  // Text Colors
  --hi-button-text-color: var(--hi-color-text-primary);
  --hi-button-text-color-active: var(--hi-color-text-primary);
  --hi-button-text-color-disabled: rgba(128, 128, 128, 0.5);
  
  // Icon Colors
  --hi-button-icon-color: var(--hi-icon-color);
  --hi-button-icon-color-active: var(--hi-icon-color);
  --hi-button-icon-color-disabled: rgba(128, 128, 128, 0.5);
  
  // Background Colors
  --hi-button-bg: transparent;
  --hi-button-bg-active: var(--hi-bg-surface-dark);
  --hi-button-bg-disabled: rgba(128, 128, 128, 0.1);
  
  // Border Colors
  --hi-button-border-color: var(--hi-border-color);
  --hi-button-border-color-focus: var(--hi-border-color-focus);
  --hi-button-border-color-disabled: rgba(128, 128, 128, 0.2);
  
  // Shadow & Glow (used by Glow wrapper)
  --hi-button-glow: var(--hi-glow-color);
  
  //  Glow Effects (per-variant) - base + hover
  --hi-glow-button-primary: 0 0 16px rgba(255, 179, 167, 0.35), 0 0 4px rgba(255, 179, 167, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1);
  --hi-glow-button-secondary: 0 0 16px rgba(81, 154, 115, 0.35), 0 0 4px rgba(81, 154, 115, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1);
  --hi-glow-button-danger: 0 0 16px rgba(255, 76, 0, 0.35), 0 0 4px rgba(255, 76, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1);
  --hi-glow-button-success: 0 0 16px rgba(14, 184, 64, 0.35), 0 0 4px rgba(14, 184, 64, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1);
  
  // ============================================
  // 2. Border Radius System
  // ============================================
  
  --hi-button-radius: 6px;
  
  // ============================================
  // 3. Animation System
  // ============================================
  
  // Duration
  --hi-button-duration: var(--hi-duration-normal);
  --hi-button-duration-active: var(--hi-duration-instant);
  
  // Easing
  --hi-button-easing: var(--hi-ease-default);
  
  // Transition
  --hi-button-transition: 
    background-color var(--hi-button-duration) var(--hi-button-easing),
    border-color var(--hi-button-duration) var(--hi-button-easing),
    transform var(--hi-button-duration-active) var(--hi-button-easing);
  
  // ============================================
  // 4. Background System
  // ============================================
  
  --hi-button-bg-blur: none;
  
  // ============================================
  // 5. SVG System
  // ============================================
  
  --hi-button-icon-fill: var(--hi-icon-fill);
  --hi-button-icon-fill-opacity: var(--hi-icon-fill-opacity);
  --hi-button-icon-size: var(--hi-icon-size-sm);
  
  // ============================================
  // 6. Spacing System
  // ============================================
  
  --hi-button-padding-x: var(--hi-spacing-md);
  --hi-button-padding-y: 12px;
  --hi-button-gap: var(--hi-spacing-xs);
  
  // ============================================
  // 7. Border System
  // ============================================
  
  --hi-button-border-width: var(--hi-border-width);
  --hi-button-border-width-focus: var(--hi-border-width-focus);
  --hi-button-border-style: var(--hi-border-style);
  
  // ============================================
  // 8. Transform System
  // ============================================
  
  --hi-button-transform: none;
  --hi-button-transform-active: scale(0.98);
  
  // ============================================
  // 9. Typography System
  // ============================================
  
  --hi-button-font-size: 0.875rem;
  --hi-button-font-weight: 500;
  --hi-button-line-height: 1.4;
  --hi-button-letter-spacing: 0.01em;
}

// ============================================
// Primary Variant Variables
// ============================================

.hi-button-primary {
  --hi-button-text-color: var(--hi-color-text-on-primary);
  --hi-button-text-color-active: var(--hi-color-text-on-primary);

  --hi-button-icon-color: var(--hi-color-text-on-primary);
  --hi-button-icon-color-active: var(--hi-color-text-on-primary);

  --hi-button-bg: var(--hi-color-primary);
  --hi-button-bg-active: var(--hi-button-primary-dark);

  --hi-button-border-color: transparent;
  --hi-button-border-color-focus: var(--hi-color-primary);

  --hi-button-glow: var(--hi-glow-button-primary);
}

// ============================================
// Secondary Variant Variables
// ============================================

.hi-button-secondary {
  --hi-button-text-color: var(--hi-color-text-on-secondary);
  --hi-button-text-color-active: var(--hi-color-text-on-secondary);

  --hi-button-icon-color: var(--hi-color-text-on-secondary);
  --hi-button-icon-color-active: var(--hi-color-text-on-secondary);

  --hi-button-bg: var(--hi-color-secondary);
  --hi-button-bg-active: var(--hi-button-secondary-dark);

  --hi-button-border-color: transparent;
  --hi-button-border-color-focus: var(--hi-color-secondary);

  --hi-button-glow: var(--hi-glow-button-secondary);
}

// ============================================
// Ghost Variant Variables
// ============================================

.hi-button-ghost {
  --hi-button-text-color: var(--hi-ghost-text);
  --hi-button-text-color-active: var(--hi-ghost-text);

  --hi-button-icon-color: var(--hi-ghost-text);
  --hi-button-icon-color-active: var(--hi-ghost-text);

  --hi-button-bg: transparent;
  --hi-button-bg-active: var(--hi-bg-surface-dark);

  --hi-button-border-color: var(--hi-ghost-border);
  --hi-button-border-color-focus: var(--hi-ghost-border);

  --hi-button-glow: var(--hi-ghost-glow);
}

// ============================================
// Borderless Variant Variables
// ============================================

.hi-button-borderless {
  --hi-button-text-color: var(--hi-ghost-text);
  --hi-button-text-color-active: var(--hi-ghost-text);

  --hi-button-icon-color: var(--hi-ghost-text);
  --hi-button-icon-color-active: var(--hi-ghost-text);

  --hi-button-bg: transparent;
  --hi-button-bg-active: var(--hi-bg-surface-dark);

  --hi-button-border-color: transparent;
  --hi-button-border-color-focus: var(--hi-ghost-border);

  --hi-button-glow: var(--hi-ghost-glow);
}

// ============================================
// Danger Variant Variables
// ============================================

.hi-button-danger {
  --hi-button-text-color: var(--hi-color-text-on-danger, #ffffff);
  --hi-button-text-color-active: var(--hi-color-text-on-danger, #ffffff);

  --hi-button-icon-color: var(--hi-color-text-on-danger, #ffffff);
  --hi-button-icon-color-active: var(--hi-color-text-on-danger, #ffffff);

  --hi-button-bg: var(--hi-color-danger);
  --hi-button-bg-active: var(--hi-button-danger-dark);

  --hi-button-border-color: transparent;
  --hi-button-border-color-focus: var(--hi-color-danger);

  --hi-button-glow: var(--hi-glow-button-danger);
}

// ============================================
// Success Variant Variables
// ============================================

.hi-button-success {
  --hi-button-text-color: var(--hi-color-text-on-success, #ffffff);
  --hi-button-text-color-active: var(--hi-color-text-on-success, #ffffff);

  --hi-button-icon-color: var(--hi-color-text-on-success, #ffffff);
  --hi-button-icon-color-active: var(--hi-color-text-on-success, #ffffff);

  --hi-button-bg: var(--hi-color-success);
  --hi-button-bg-active: var(--hi-button-success-dark);

  --hi-button-border-color: transparent;
  --hi-button-border-color-focus: var(--hi-color-success);

  --hi-button-glow: var(--hi-glow-button-success);
}

// ============================================
// Size Variant Variables
// ============================================

.hi-button-sm {
  --hi-button-padding-x: var(--hi-spacing-sm);
  --hi-button-padding-y: var(--hi-spacing-xs);
  --hi-button-icon-size: var(--hi-icon-size-xs);
  --hi-button-radius: 6px;
  --hi-button-font-size: 0.75rem;
}

.hi-button-md {
  --hi-button-padding-x: var(--hi-spacing-md);
  --hi-button-padding-y: 12px;
  --hi-button-icon-size: var(--hi-icon-size-sm);
  --hi-button-radius: 6px;
  --hi-button-font-size: 0.875rem;
}

.hi-button-lg {
  --hi-button-padding-x: var(--hi-spacing-lg);
  --hi-button-padding-y: 12px;
  --hi-button-icon-size: var(--hi-icon-size-md);
  --hi-button-radius: 6px;
  --hi-button-font-size: 1rem;
}
