/*
 * Variables CSS
 * Paleta de colores, tipografía, espaciados y sombras
 * Modificar aquí para cambiar la apariencia global
 */

:root {
    /* ─── Colores primarios ─────────────────────────────── */
    --color-primary:       #745b00;
    --color-primary-light: #FED03D;
    --color-primary-dark:  #584400;

    /* ─── Colores secundarios ───────────────────────────── */
    --color-secondary:       #13216A;
    --color-secondary-light: #344089;
    --color-secondary-dark:  #000f5c;

    /* ─── Neutros ───────────────────────────────────────── */
    --color-white:     #ffffff;
    --color-black:     #1A1A1A;
    --color-gray-100:  #f9f9f9;
    --color-gray-200:  #f3f3f3;
    --color-gray-300:  #e2d9ca;
    --color-gray-400:  #d1c5ad;
    --color-gray-500:  #7f7661;
    --color-gray-600:  #4e4634;
    --color-gray-700:  #1f1b12;

    /* ─── Fondos ────────────────────────────────────────── */
    --bg-primary:       var(--color-white);
    --bg-secondary:     var(--color-secondary);
    --bg-accent:        var(--color-primary-light);
    --bg-overlay:       rgba(19, 33, 106, 0.3);
    --bg-overlay-dark:  rgba(19, 33, 106, 0.8);

    /* ─── Textos ────────────────────────────────────────── */
    --text-primary:   var(--color-gray-700);
    --text-secondary: var(--color-secondary);
    --text-muted:     var(--color-gray-600);
    --text-light:     var(--color-white);
    --text-accent:    var(--color-primary-light);

    /* ─── Tipografía ────────────────────────────────────── */
    --font-family: 'Montserrat', sans-serif;
    --font-weight-light:  300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold:    700;

    /* Escala tipográfica modular (1.25 ratio) */
    --text-xs:       0.75rem;    /* 12px */
    --text-sm:       0.875rem;   /* 14px */
    --text-base:     1rem;       /* 16px */
    --text-lg:       1.125rem;   /* 18px */
    --text-xl:       1.25rem;    /* 20px */
    --text-2xl:      1.5rem;     /* 24px */
    --text-3xl:      2rem;       /* 32px */
    --text-4xl:      2.5rem;     /* 40px */
    --text-5xl:      4rem;       /* 64px */

    --line-height-tight:   1.1;
    --line-height-normal:  1.4;
    --line-height-relaxed: 1.6;

    --letter-spacing-tight:  -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide:   0.1em;
    --letter-spacing-wider:  0.2em;
    --letter-spacing-widest: 0.3em;

    /* ─── Espaciados ────────────────────────────────────── */
    --spacing-xs:   0.25rem;  /* 4px */
    --spacing-sm:   0.5rem;   /* 8px */
    --spacing-md:   1rem;     /* 16px */
    --spacing-lg:   1.5rem;   /* 24px */
    --spacing-xl:   2rem;     /* 32px */
    --spacing-2xl:  3rem;     /* 48px */
    --spacing-3xl:  4rem;     /* 64px */
    --spacing-4xl:  5rem;     /* 80px */
    --spacing-5xl:  7.5rem;   /* 120px */

    --margin-mobile: 1.25rem; /* 20px */
    --margin-desktop: 4rem;   /* 64px */

    /* ─── Layout ────────────────────────────────────────── */
    --container-max: 1280px;
    --gutter: var(--spacing-xl);
    --section-padding: var(--spacing-5xl);
    --section-padding-mobile: var(--spacing-3xl);

    /* ─── Bordes ────────────────────────────────────────── */
    --border-width: 1px;
    --border-radius: 0;
    --border-radius-full: 9999px;

    /* ─── Sombras ───────────────────────────────────────── */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg:   0 10px 30px rgba(0, 0, 0, 0.1);

    /* ─── Transiciones ──────────────────────────────────── */
    --transition-fast:   0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.5s ease;

    /* ─── Z-index ───────────────────────────────────────── */
    --z-navbar: 1000;
    --z-overlay: 900;
    --z-modal: 1100;
}