/*
Theme Name:   Ilona Theme
Theme URI:    https://ilonalibros.com
Description:  Child theme personalizado para editorial ilona libros
Author:       Ilona Libros
Author URI:   https://ilonalibros.com
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ilona-theme
*/

/* =========================================================
   FUENTES LOCALES
   ========================================================= */

@font-face {
    font-family: 'Pastel Crayon';
    src: url('../../../assets/fonts/pastel-crayon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../../../assets/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../../../assets/fonts/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../../../assets/fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../../../assets/fonts/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   VARIABLES CSS
   ========================================================= */

:root {
    /* Colores */
    --color-naranja:      #FF7300;
    --color-naranja-btn:  #F4621F;
    --color-naranja-hover:#d4521a;
    --color-azul-fondo:   #D9F3EE;
    --color-menta:        #D8EEED;
    --color-azul-turqui:  #061437;
    --color-footer:       #1A1A2E;
    --color-blanco:       #FFFFFF;

    /* Tipografía */
    --font-especial:  'Pastel Crayon', cursive;
    --font-cuerpo:    'Open Sans', sans-serif;

    /* Botón pill */
    --btn-radius:   50px;
    --btn-padding:  14px 32px;
    --btn-bg:       var(--color-naranja-btn);
    --btn-bg-hover: var(--color-naranja-hover);
}

/* =========================================================
   BASE
   ========================================================= */

body {
    font-family: var(--font-cuerpo);
    font-weight: 400;
    color: var(--color-azul-turqui);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-cuerpo);
    font-weight: 800;
}

/* =========================================================
   BOTONES
   ========================================================= */

.ilona-btn,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button {
    background-color: var(--btn-bg);
    color: var(--color-blanco);
    font-family: var(--font-cuerpo);
    font-weight: 700;
    border-radius: var(--btn-radius);
    padding: var(--btn-padding);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.ilona-btn:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--btn-bg-hover);
    color: var(--color-blanco);
}