:root {
    --color-primary: #0c8334;
    --color-secondary: #764ba2;
    --color-accent: #13840b;
    --color-dark: #1a202c;
    --color-light: #f7fafc;
}

/* Ahora podemos usar estas variables en nuestro CSS.
  Cualquier cambio de color en el panel de admin se reflejará aquí automáticamente.
*/

.header-modern {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.hero-section {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.9), rgba(52, 73, 94, 0.9)), url('https://www.toptal.com/designers/subtlepatterns/uploads/double-bubble-outline.png');
    /* Podríamos usar nuestros colores aquí también si quisiéramos */
}

.btn-gradient {
    background-image: linear-gradient(to right, var(--color-primary) 0%, var(--color-accent) 51%, var(--color-primary) 100%);
}

/* Puedes añadir más reglas aquí que usen tus colores dinámicos */