/* ========== BRAND COLORS ========== */
:root {
    /* restful retreat */
    --primary1: #2A3F33; 
    /* calm clay */
    --primary2: #EEEBE0;
    /* wellness taupe */
    --secondary1: #958D6F;
    /* soft sage */
    --secondary2: #CBD8AB;
    /* deep relief */
    --secondary3: #4E4B43;
    --white: #FDFEFFFF;
    
    /* z-index scale */
    --z-behind: -1;
    --z-default: 0;
    --z-above: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-mobile-nav: 999;
    --z-topbar: 1000;
    --z-skip-link: 10000;

    /* input borders */
    --input-border: #ccc;

    /* overlay colors */
    --overlay-light: rgba(253, 254, 255, 0.1);
    --overlay-medium: rgba(253, 254, 255, 0.5);
    --overlay-strong: rgba(253, 254, 255, 0.8);

    /* shadow/overlay colors */
    --shadow-dark: rgba(0,0,0,0.8);
    --shadow-medium: rgba(0,0,0,0.35);
    --shadow-light: rgba(0,0,0,0.15);
    --shadow-subtle: rgba(0,0,0,0.05);
    --shadow-text: rgba(0,0,0,0.6);
    --shadow-glow: rgba(0,0,0,0.5);
    --shadow-soft: rgba(0,0,0,0.2);

    /* section backgrounds */
    --bg-bullet: rgba(136, 150, 113, 0.85);
    --bg-text: rgba(149, 141, 111, 0.85);
    --bg-highlight: rgba(238, 235, 224, 0.85);

    /* text shadow patterns */
    --text-shadow-hero: 0 0 2rem var(--shadow-dark), 0 0 8rem var(--shadow-dark);

    /* transition patterns */
    --transition-button: box-shadow 0.2s ease, background-color 0.2s ease;
    --transition-glow: text-shadow 0.2s ease;
    --transition-fade: opacity 0.3s ease, transform 0.3s ease;

    /* box shadow patterns */
    --shadow-button-hover: 0 0 8px var(--overlay-medium);

    /* border radii */
    --radius-sm: 4px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 1rem;
    --radius-xxl: 2rem;
}