/*
====================================================
YoYo Real Estate
Global Design Variables
Brand: Copper | White | Charcoal
====================================================
*/

:root {

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

    --copper: #B87333;
    --copper-light: #D89A5B;
    --copper-dark: #8C5525;

    --white: #FFFFFF;
    --off-white: #F8F7F5;
    --cream: #F3EEE8;

    --charcoal: #242424;
    --charcoal-light: #3A3A3A;
    --gray: #6B6B6B;
    --light-gray: #E5E5E5;

    --black: #111111;


    /* ==================================================
       PRIMARY / SECONDARY COLORS
    ================================================== */

    --primary-color: var(--copper);
    --secondary-color: var(--charcoal);

    --background-color: var(--white);
    --section-background: var(--off-white);

    --text-color: var(--charcoal);
    --text-muted: var(--gray);

    --border-color: var(--light-gray);

    --success-color: #2E7D32;
    --warning-color: #C77700;
    --error-color: #B3261E;


    /* ==================================================
       COMPATIBILITY COLOR ALIASES
       Supports existing website CSS
    ================================================== */

    --color-primary: var(--copper);
    --color-secondary: var(--charcoal);

    --color-charcoal: var(--charcoal);
    --color-charcoal-light: var(--charcoal-light);

    --color-white: var(--white);
    --color-off-white: var(--off-white);

    --color-gray: var(--gray);
    --color-light-gray: var(--light-gray);

    --color-error: var(--error-color);
    --color-success: var(--success-color);


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

    --font-primary:
        'Montserrat',
        Arial,
        Helvetica,
        sans-serif;

    --font-heading:
        'Playfair Display',
        Georgia,
        serif;

    --font-body:
        'Montserrat',
        Arial,
        Helvetica,
        sans-serif;


    /* ==================================================
       FONT WEIGHTS
    ================================================== */

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


    /* ==================================================
       FONT SIZES
    ================================================== */

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;

    --heading-sm: 1.75rem;
    --heading-md: 2.25rem;
    --heading-lg: 3rem;
    --heading-xl: 4rem;


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

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 5rem;
    --space-10: 6rem;


    /* ==================================================
       LAYOUT
    ================================================== */

    --container-width: 1200px;

    --section-padding:
        var(--space-10) 0;

    --content-width: 800px;


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

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --radius-round: 50%;


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

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

    --shadow-md:
        0 8px 24px rgba(0, 0, 0, 0.12);

    --shadow-lg:
        0 20px 45px rgba(0, 0, 0, 0.16);


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

    --transition-fast:
        0.2s ease;

    --transition-normal:
        0.35s ease;

    --transition-slow:
        0.6s ease;


    /* ==================================================
       BUTTON SETTINGS
    ================================================== */

    --button-padding:
        14px 32px;

    --button-radius:
        50px;


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

    --header-height:
        90px;

    --header-shadow:
        0 4px 15px rgba(0, 0, 0, 0.08);


    /* ==================================================
       HERO SETTINGS
    ================================================== */

    --hero-height:
        85vh;

    --hero-overlay:
        rgba(0, 0, 0, 0.45);


    /* ==================================================
       FORM SETTINGS
    ================================================== */

    --input-height:
        52px;

    --input-radius:
        8px;


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

    --z-base: 1;

    --z-header: 100;

    --z-dropdown: 200;

    --z-modal: 300;

    --z-overlay: 400;


    /* ==================================================
       IMAGE SETTINGS
    ================================================== */

    --image-overlay:
        linear-gradient(
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.45)
        );

}