/* Lucide Icons Styles */
/* Centralized icon styling for all HTML pages */

/* Add missing color variables to match design system */
:root {
  --green-600: #16a34a;
  --green-500: #22c55e;
  --red-600: #dc2626;
  --red-500: #ef4444;
}

/* ========================================
   Base Icon Styles
   ======================================== */

.icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  stroke-width: 2;
  display: inline-block;
}

/* ========================================
   Icon Size Variants
   ======================================== */

.icon-sm {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.icon-lg {
  width: 28px;
  height: 28px;
  margin-right: 12px;
}

.icon-xl {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.icon-2xl {
  width: 64px;
  height: 64px;
}

/* ========================================
   Icon Color Variants
   ======================================== */

.icon-success {
  color: var(--green-600);
}

.icon-error {
  color: var(--red-600);
}

.icon-primary {
  color: var(--blue-600);
}

.icon-muted {
  color: var(--gray-500);
}

/* ========================================
   Context-Specific Icon Styles
   ======================================== */

/* Icons in h1 headings */
h1 .icon {
  width: 28px;
  height: 28px;
  margin-right: 12px;
}

/* Icons in h2 headings */
h2 .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* Icons in h3 headings */
h3 .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* ========================================
   Component-Specific Styles
   ======================================== */

/* Success page icon container */
.success-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.success-icon svg {
  width: 64px;
  height: 64px;
  color: var(--green-600);
  stroke-width: 2;
}

/* Footer text icons */
.footer-text svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  stroke-width: 2;
}

/* Section title icons */
.section-title .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}