/*==================================================
VILLA TAZITUNT
02-variables.css
V6.1 — Premium Editorial Design System
==================================================*/

:root {

    /*==================================================
    COLORS — CORE
    ==================================================*/

    --white: #ffffff;

    --stone-50: #f8f6f2;
    --stone-100: #f1eee8;
    --stone-200: #e3ddd4;

    --sand-50: #f4eee3;
    --sand-100: #ebe1d1;
    --sand-200: #d8c7ae;

    --olive: #6f7b4a;
    --olive-light: #8d976c;
    --olive-dark: #35392d;

    --terracotta: #a96f50;
    --terracotta-light: #c58a68;

    --charcoal: #181916;
    --charcoal-soft: #2b2d28;


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

    --bg: var(--stone-100);

    --surface: var(--white);

    --text: var(--charcoal);

    --text-soft: #625e56;

    --text-muted: #8b8b83;

    --border: rgba(24, 25, 22, 0.12);

    --border-light: rgba(24, 25, 22, 0.07);

    --border-dark: rgba(255, 255, 255, 0.14);


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

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

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


    /* Compatibility aliases */

    --font-title: var(--font-serif);

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


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

    --weight-light: 300;

    --weight-regular: 400;

    --weight-medium: 500;

    --weight-semibold: 600;


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

    --container: 1440px;

    --container-wide: 1600px;

    --container-narrow: 960px;

    --page-padding: 48px;

    --page-padding-tablet: 32px;

    --page-padding-mobile: 20px;


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

    --space-1: 8px;

    --space-2: 12px;

    --space-3: 16px;

    --space-4: 24px;

    --space-5: 32px;

    --space-6: 48px;

    --space-7: 64px;

    --space-8: 96px;

    --space-9: 128px;

    --space-10: 160px;

    --space-11: 192px;


    /*==================================================
    RADIUS
    Editorial system — restrained
    ==================================================*/

    --radius-xs: 2px;

    --radius-sm: 4px;

    --radius-md: 8px;

    --radius-lg: 12px;


    /*==================================================
    SHADOWS
    Extremely subtle
    ==================================================*/

    --shadow-soft:
        0 12px 30px
        rgba(24, 25, 22, 0.06);

    --shadow-medium:
        0 24px 60px
        rgba(24, 25, 22, 0.09);


    /*==================================================
    MOTION
    ==================================================*/

    --ease-standard:
        cubic-bezier(.22, .61, .36, 1);

    --ease-smooth:
        cubic-bezier(.4, 0, .2, 1);

    --transition-fast:
        0.25s var(--ease-standard);

    --transition:
        0.4s var(--ease-standard);

    --transition-slow:
        0.8s var(--ease-standard);


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

    --z-base: 1;

    --z-header: 1100;

    --z-backdrop: 1080;

    --z-menu: 1090;

    --z-modal: 1200;


    /*==================================================
    LEGACY COMPATIBILITY
    ==================================================*/

    --bg-soft: var(--stone-200);

    --gold: var(--terracotta);

    --gold-light: var(--terracotta-light);

    --gold-dark: #80523d;

    --radius: var(--radius-md);

    --section: 140px;

    --shadow: var(--shadow-medium);

}