/* Importar variables CSS */
@import url('variables.css');

/* Estilos globales - YakuResto */
* {
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
}

body {
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
    background-color: var(--color-background);
    color: var(--color-text-main);
}

body, input, button, select, textarea, label, span, div, p, a {
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
}

/* Títulos con tamaños proporcionales pero basados en 14px */
h1 { 
    font-family: var(--font-primary) !important;
    font-size: 2rem !important; 
    color: var(--color-text-main);
}
h2 { 
    font-family: var(--font-primary) !important;
    font-size: 1.75rem !important; 
    color: var(--color-text-main);
}
h3 { 
    font-family: var(--font-primary) !important;
    font-size: 1.5rem !important; 
    color: var(--color-text-main);
}
h4 { 
    font-family: var(--font-primary) !important;
    font-size: 1.25rem !important; 
    color: var(--color-text-main);
}
h5 { 
    font-family: var(--font-primary) !important;
    font-size: 1.125rem !important; 
    color: var(--color-text-main);
}
h6 { 
    font-family: var(--font-primary) !important;
    font-size: 1rem !important; 
    color: var(--color-text-main);
}

/* Inputs, botones y elementos de formulario */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea,
select {
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
}

button,
.btn,
a.button {
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
}

/* Clases de utilidad para usar variables CSS */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-accent {
    background-color: var(--color-accent) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-secondary {
    border-color: var(--color-secondary) !important;
}