/*==================================================
    VARIABLES GLOBALES
    Proyecto: Invitación de Boda Ruth & JP
==================================================*/

:root{

    /*====================================
                PALETA DE COLORES
    ====================================*/

    /* Fondo principal */
    --color-background: #F8F4EC;

    /* Tarjetas */
    --color-surface: rgba(255,255,255,0.72);

    /* Blanco */
    --color-white: #FFFFFF;

    /* Verde olivo (logo) */
    --color-primary: #6E7258;

    /* Verde oscuro */
    --color-primary-dark: #555A45;

    /* Dorado */
    --color-accent: #B5965A;

    /* Dorado oscuro */
    --color-accent-dark: #9E7E46;

    /* Texto */
    --color-text: #4F4F4F;

    /* Texto claro */
    --color-text-light: #777777;

    /* Línea */
    --color-border: rgba(182,150,90,.20);

    /*====================================
                  TIPOGRAFÍAS
    ====================================*/

    --font-title: "Cormorant Garamond", serif;

    --font-body: "Montserrat", sans-serif;


    /*====================================
              TAMAÑOS DE LETRA
    ====================================*/

    --fs-hero: clamp(2.8rem, 5vw, 5rem);

    --fs-section-title: clamp(2rem, 4vw, 3rem);

    --fs-subtitle: 1.35rem;

    --fs-body: 1rem;

    --fs-small: .90rem;

    --fs-countdown: clamp(2.5rem,5vw,4.5rem);


    /*====================================
              GROSOR DE LETRA
    ====================================*/

    --fw-light:300;

    --fw-normal:400;

    --fw-medium:500;

    --fw-semibold:600;

    --fw-bold:700;


    /*====================================
                ESPACIADOS
    ====================================*/

    --space-xs:.5rem;

    --space-sm:1rem;

    --space-md:2rem;

    --space-lg:4rem;

    --space-xl:7rem;

    --space-xxl:10rem;


    /*====================================
                BORDES
    ====================================*/

    --radius-sm:10px;

    --radius-md:20px;

    --radius-lg:30px;

    --radius-round:999px;


    /*====================================
                SOMBRAS
    ====================================*/

    --shadow-soft:
        0 10px 35px rgba(0,0,0,.08);

    --shadow-medium:
        0 15px 40px rgba(0,0,0,.12);

    --shadow-strong:
        0 25px 60px rgba(0,0,0,.18);


    /*====================================
            EFECTO GLASSMORPHISM
    ====================================*/

    --glass-background:
        rgba(248,244,236,.72);

    --glass-border:
        rgba(255,255,255,.35);

    --glass-blur:16px;


    /*====================================
            TRANSICIONES
    ====================================*/

    --transition-fast:.25s;

    --transition-normal:.4s;

    --transition-slow:.8s;


    /*====================================
                CONTENEDOR
    ====================================*/

    --container-width:1200px;

    --container-padding:25px;


    /*====================================
            ALTURA DE SECCIONES
    ====================================*/

    --section-padding:120px;

    --hero-height:100vh;


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

    --button-height:58px;

    --button-width:260px;


    /*====================================
            CUENTA REGRESIVA
    ====================================*/

    --count-size:120px;

    --count-gap:30px;


    /*====================================
            HEADER
    ====================================*/

    --logo-width:220px;


}