/* Variables de diseño */
:root {
  --accent-color: #d4af37;
  --accent2-color: #8b9dc3;
  --accent3-color: #4a90a4;
  --accent4-color: #c9a362;
  --primary-color: #1e3a5f;
  --dark-text-color: #2d3748;
  --gray-text-color: #718096;
  --button-padding-x: 32px;
  --button-padding-y: 14px;
  --font-family-body: Inter;
  --light-text-color: #ffffff;
  --dark-border-color: #cbd5e0;
  --light-border-color: #e2e8f0;
  --font-family-heading: 'Playfair Display', Georgia, serif;
  --button-rounded-radius: 8px;
  --dark-background-color: #1a202c;
  --light-background-color: #f0f4f8;
  --medium-background-color: #e2e8f0;
  --primary-button-text-color: #ffffff;
  --secondary-button-bg-color: #f7fafc;
  --secondary-button-text-color: #1e3a5f;
  --primary-button-hover-bg-color: #2c5282;
  --primary-button-hover-text-color: #ffffff;
  --secondary-button-hover-bg-color: #e2e8f0;
  --secondary-button-hover-text-color: #1e3a5f;
}

/* Utilidades para elementos interactivos */
.hovered-element {
  outline: #3871E0 dashed 2px;
}

.clicked-element {
  outline: #3871E0 solid 2px;
}

.clicked-code-section {
  border: #3B82F6 solid 2px;
}