/* ================================================
   ARCHIVO: assets/css/config/variables.css
   Variables CSS globales
================================================ */
:root {
    /* Colores */
    --color-primary: #a3a3a3;
    --color-primary-hover: #191970;
    --color-secondary: #800080;
    --color-text: #212121;
    --color-text-light: #8a8a8a;
    --color-text-dark: #212121;
    --color-background: #fff;
    --color-background-alt: #eee;
    --color-border: #ccc;
    --color-border-dark: #bbb;
    --color-border-light: #aaa;
    
    /* Tipografía */
    --font-primary: 'Times New Roman', Times, serif;
    --font-monospace: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    --font-code: "Courier 10 Pitch", courier, monospace;
    --font-size-base: 14px;
    --font-size-small: 11px;
    --font-size-large: 14px;
    --line-height-base: 1.2;
    --line-height-heading: 1.2;
    --letter-spacing-base: 0.02em;
    
    /* Espaciado */
    --padding-general:10px;

   /* Hay que cambiar estas variables y ponerlas como yo quiero
    --spacing-unit: 1.5em;  
    --spacing-small: 0.75em;
    --spacing-large: 3em;*/
    
    /* Grid */
    --grid-columns: 12;
    --grid-gap: 10px;
    --container-max-width: 1200px;
    
    /* Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1200px;
    
    /* Otros */
    --border-radius: 3px;
    --transition-speed: 0.3s;
}
@media (max-width: 768px) {
    :root{
    --grid-gap: 0px;
}
}