/* =====================================================
   SAYZORA HOSPITALITY
   Design Variables
===================================================== */

:root {

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

    --color-primary: #0B1F3A;
    --color-primary-light: #1C3558;

    --color-accent: #12B5CB;
    --color-accent-dark: #0F9CAF;

    --color-gold: #D4AF37;

    --color-white: #FFFFFF;
    --color-light: #F7F8FA;
    --color-gray: #E8ECF1;

    --color-text: #333333;
    --color-text-light: #666666;

    --color-border: #E5E5E5;

    --color-success: #2E8B57;
    --color-warning: #E6A700;
    --color-danger: #D64545;


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

    --font-heading: "Playfair Display", serif;
    --font-body: "Inter", sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.75rem;
    --font-size-5xl: 3.75rem;

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


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

    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;


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

    --container-width: 1200px;
    --container-padding: 24px;

    --header-height: 90px;


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

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;


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

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

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

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

    --shadow-card: 0 15px 40px rgba(0,0,0,.08);


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

    --transition-fast: .2s ease;
    --transition: .35s ease;
    --transition-slow: .6s ease;


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

    --z-header: 1000;
    --z-menu: 1100;
    --z-overlay: 900;
    --z-modal: 9999;


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

    --button-height: 52px;
    --button-padding: 0 32px;


    /* ==========================
       SECTIONS
    ========================== */

    --section-padding: 100px;
}