/* ============================================
   UI UTILITIES - ICON STANDARDIZATION
   ============================================
   
   Standard icon sizes:
   - --icon-xs: 14px (small inline icons)
   - --icon-sm: 16px (inline text icons)
   - --icon-md: 20px (button icons, default)
   - --icon-lg: 24px (large feature icons)
   
   Usage:
   - Buttons: .material-icons or .icon-md
   - Inline text: .icon-sm
   - Large features: .icon-lg
   ============================================ */

/* Base Material Symbols Outlined settings (keeps existing .material-icons markup working) */
.material-icons,
.material-symbols-outlined {
  font-family: "Material Symbols Outlined", "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: var(--icon-md, 20px);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    "FILL" 0,
    "wght" var(--icon-outline-weight, 100),
    "GRAD" 0,
    "opsz" var(--icon-optical-size, 24);
  vertical-align: middle;
}

/* Size variants */
.icon-xs {
  font-size: var(--icon-xs, 14px) !important;
}

.icon-sm {
  font-size: var(--icon-sm, 16px) !important;
}

.icon-md {
  font-size: var(--icon-md, 20px) !important;
}

.icon-lg {
  font-size: var(--icon-lg, 24px) !important;
}

/* Icon in buttons - ensure consistent sizing */
.btn .material-icons,
button .material-icons,
[role="button"] .material-icons {
  font-size: var(--icon-md, 20px);
}

/* Small buttons */
.btn-sm .material-icons,
.btn-small .material-icons {
  font-size: var(--icon-sm, 16px);
}

/* Large buttons */
.btn-lg .material-icons,
.btn-large .material-icons {
  font-size: var(--icon-lg, 24px);
}

/* ============================================
   CURSOR UTILITIES
   ============================================ */

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

/* ============================================
   FOCUS STATES - ACCESSIBILITY
   ============================================ */

.focus-ring:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* ============================================
   TRANSITION UTILITIES
   ============================================ */

.transition-fast {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-normal {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-slow {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   HOVER UTILITIES (Box-shadow instead of transform)
   ============================================ */

.hover-lift {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hover-lift:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.hover-glow {
  transition: box-shadow 0.2s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px var(--accent-glow);
}

/* ============================================
   COLOR UTILITIES (Using CSS Variables)
   ============================================ */

.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-error {
  color: var(--error) !important;
}

.text-info {
  color: var(--info) !important;
}

.bg-success {
  background-color: var(--success-light) !important;
}

.bg-warning {
  background-color: var(--warning-light) !important;
}

.bg-error {
  background-color: var(--error-light) !important;
}

.bg-info {
  background-color: var(--info-light) !important;
}