/*
|--------------------------------------------------------------------------
| WeddingUI Design System
|--------------------------------------------------------------------------
| Version : 1.0.0
| Theme   : Rustic
|--------------------------------------------------------------------------
*/

:root{

    /* ==========================================================
       COLORS
    ========================================================== */

    --color-primary: #4e3300;
    --color-secondary: #82612d;
    --color-accent: #b9935a;

    --color-sand: #ddc88f;
    --color-cream: #ffffc7;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-text: #352410;
    --color-text-light: #6b5737;

    --color-success: #4CAF50;
    --color-warning: #FFC107;
    --color-danger: #F44336;
    --color-info: #2196F3;



    /* ==========================================================
       BACKGROUNDS
    ========================================================== */

    --background-body: var(--color-cream);

    --background-section: #ffffff;

    --background-card: rgba(255,255,255,.85);

    --background-overlay:
        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.55)
        );



    /* ==========================================================
       TYPOGRAPHY
    ========================================================== */

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

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



    /* ==========================================================
       FONT SIZE
    ========================================================== */

    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 3rem;
    --text-4xl: 4rem;
    --text-5xl: 5rem;



    /* ==========================================================
       FONT WEIGHT
    ========================================================== */

    --font-light:300;
    --font-regular:400;
    --font-medium:500;
    --font-semibold:600;
    --font-bold:700;



    /* ==========================================================
       SPACING
    ========================================================== */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
    --space-8:64px;
    --space-9:96px;
    --space-10:128px;



    /* ==========================================================
       BORDER RADIUS
    ========================================================== */

    --radius-xs:4px;
    --radius-sm:8px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-xl:40px;
    --radius-pill:999px;



    /* ==========================================================
       SHADOWS
    ========================================================== */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.08);

    --shadow-md:
        0 10px 30px rgba(0,0,0,.12);

    --shadow-lg:
        0 25px 60px rgba(0,0,0,.20);



    /* ==========================================================
       CONTAINERS
    ========================================================== */

    --container-sm:768px;

    --container-md:1024px;

    --container-lg:1280px;

    --container-xl:1440px;



    /* ==========================================================
       Z INDEX
    ========================================================== */

    --z-base:1;

    --z-menu:100;

    --z-overlay:500;

    --z-modal:900;

    --z-loader:9999;



    /* ==========================================================
       TRANSITIONS
    ========================================================== */

    --transition-fast:.2s;

    --transition-normal:.4s;

    --transition-slow:.8s;



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

    --header-height:80px;



    /* ==========================================================
       BUTTONS
    ========================================================== */

    --button-height:56px;

    --button-radius:999px;



}