/* ==========================================================
   VARIABLES
========================================================== */

:root{

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

    --black:#000000;

    --black-soft:#080808;

    --black-light:#111111;

    --white:#ffffff;

    --white-soft:#f3f3f3;

    --gray-100:#dddddd;

    --gray-200:#bbbbbb;

    --gray-300:#999999;

    --gray-400:#777777;

    --gray-500:#555555;

    --gold:#c8a96a;

    --overlay:rgba(0,0,0,.42);

    --gradient-top:rgba(0,0,0,.15);

    --gradient-bottom:rgba(0,0,0,.82);

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

    --font-heading:"Playfair Display",serif;

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

    --hero-title:clamp(3rem,7vw,6.5rem);

    --hero-subtitle:clamp(.85rem,1vw,1rem);

    --hero-text:clamp(1rem,1.3vw,1.15rem);

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

    /* ======================================================
       WIDTHS
    ====================================================== */

    --content-width:650px;

    --container:1400px;

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

    --space-xs:.5rem;

    --space-sm:1rem;

    --space-md:2rem;

    --space-lg:4rem;

    --space-xl:6rem;

    --space-2xl:10rem;

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

    --radius-sm:6px;

    --radius-md:12px;

    --radius-lg:18px;

    --radius-xl:30px;

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

    --shadow-soft:

        0 20px 60px rgba(0,0,0,.25);

    --shadow-large:

        0 40px 120px rgba(0,0,0,.45);

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

    --transition-fast:.25s;

    --transition:.45s;

    --transition-slow:.8s;

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

    --z-bg:1;

    --z-overlay:5;

    --z-content:20;

    --z-nav:100;

    --z-loader:9999;

}

/* ==========================================================
   GLOBAL BODY SETTINGS
========================================================== */

body{

    background:var(--black);

    color:var(--white);

    font-family:var(--font-body);

}

/* ==========================================================
   HEADINGS
========================================================== */

h1,
h2,
h3{

    font-family:var(--font-heading);

}

/* ==========================================================
   PARAGRAPHS
========================================================== */

p{

    color:var(--gray-100);

}

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

a,
button,
img{

    transition:all var(--transition);

}