/**
 * HelyDev Core - Estilos Base
 * 
 * Estilos compartidos entre todos los componentes
 * @package HelyDev_Core
 */

/* ==========================================================================
   Variables CSS
   ========================================================================== */
:root {
  /* Colores principales de HelyDev */
  --helydev-primary: #0d3b61;
  --helydev-secondary: #f5a600;
  --helydev-white: #ffffff;
  --helydev-dark: #1a1a1a;
  --helydev-gray: #f4f4f4;

  /* Tipografía */
  --helydev-font-family: "Helvetica", Arial, sans-serif;
  --helydev-font-size-base: 1rem;
  --helydev-font-size-sm: 0.9rem;
  --helydev-font-size-lg: 1.4rem;

  /* Espaciado */
  --helydev-spacing-sm: 15px;
  --helydev-spacing-md: 25px;
  --helydev-spacing-lg: 30px;

  /* Bordes */
  --helydev-border-radius: 35px;
  --helydev-border-radius-btn: 50px;

  /* Transiciones */
  --helydev-transition-fast: 0.3s ease;
  --helydev-transition-medium: 0.5s ease;
  --helydev-transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Estilos Base de Componentes HelyDev
   ========================================================================== */

/* Contenedor general */
.helydev-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Botones HelyDev */
.helydev-btn {
  text-decoration: none;
  padding: 12px 35px;
  border-radius: var(--helydev-border-radius-btn);
  font-weight: bold;
  font-size: var(--helydev-font-size-sm);
  transition: var(--helydev-transition-fast);
  display: inline-block;
  cursor: pointer;
  border: none;
  text-align: center;
}

.helydev-btn:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

.helydev-btn--primary {
  background-color: var(--helydev-primary);
  color: var(--helydev-white);
}

.helydev-btn--secondary {
  background-color: var(--helydev-secondary);
  color: var(--helydev-white);
}

/* Iconos HelyDev */
.helydev-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.helydev-icon svg {
  width: 100%;
  height: 100%;
}

.helydev-icon--white svg {
  stroke: var(--helydev-white);
}

/* Títulos HelyDev */
.helydev-title {
  font-size: var(--helydev-font-size-lg);
  margin: var(--helydev-spacing-sm) 0;
  line-height: 1.2;
}

/* Texto HelyDev */
.helydev-text {
  font-size: var(--helydev-font-size-sm);
  line-height: 1.5;
  opacity: 0.9;
}