:root {

    /* =====================
       BRAND COLORS
    ===================== */
    --color-primary:        #C9788A;   /* Main brand pink */
    --color-primary-light:  #E8B4BC;   /* Lighter pink for hovers */
    --color-primary-dark:   #A0566A;   /* Deeper pink for active states */
    --color-secondary:      #2C2C2C;   /* Near black for contrast */
    --color-accent:         #D4AF87;   /* Gold accent */
    --color-accent-light:   #F0D9B5;   /* Light gold */

    /* =====================
       NEUTRAL COLORS
    ===================== */
    --color-white:          #FFFFFF;
    --color-off-white:      #FAF7F5;   /* Warm white for backgrounds */
    --color-light-gray:     #F2EEEC;   /* Section backgrounds */
    --color-mid-gray:       #B0A8A8;   /* Borders, dividers */
    --color-dark-gray:      #6B6363;   /* Secondary text */
    --color-black:          #1A1A1A;   /* True dark */

    /* =====================
       TEXT COLORS
    ===================== */
    --text-primary:         #1A1A1A;   /* Main body text */
    --text-secondary:       #6B6363;   /* Subtext, captions */
    --text-light:           #FFFFFF;   /* Text on dark backgrounds */
    --text-muted:           #B0A8A8;   /* Placeholder, disabled */
    --text-link:            #C9788A;   /* Anchor links */
    --text-link-hover:      #A0566A;   /* Anchor link hover */

    /* =====================
       BACKGROUND COLORS
    ===================== */
    --bg-site:              #FFFFFF;   /* Main site background */
    --bg-section-alt:       #FAF7F5;   /* Alternate section bg */
    --bg-dark:              #1A1A1A;   /* Dark sections, footer */
    --bg-overlay:           rgba(26, 26, 26, 0.45); /* Hero overlay */

    /* =====================
       BUTTON COLORS
    ===================== */
    --btn-primary-bg:       #C9788A;
    --btn-primary-text:     #FFFFFF;
    --btn-primary-hover-bg: #A0566A;
    --btn-secondary-bg:     transparent;
    --btn-secondary-text:   #C9788A;
    --btn-secondary-border: #C9788A;
    --btn-secondary-hover-bg:   #C9788A;
    --btn-secondary-hover-text: #FFFFFF;

    /* =====================
       TYPOGRAPHY — FONTS
    ===================== */
    --font-primary:   'Cormorant Garamond', Georgia, serif;  /* Headings - elegant */
    --font-secondary: 'Jost', sans-serif;                    /* Body - clean modern */
    --font-accent:    'Playfair Display', Georgia, serif;    /* Special callouts */

    /* =====================
       TYPOGRAPHY — SIZES
    ===================== */
    --text-xs:    0.75rem;    /* 12px */
    --text-sm:    0.875rem;   /* 14px */
    --text-base:  1rem;       /* 16px */
    --text-md:    1.125rem;   /* 18px */
    --text-lg:    1.25rem;    /* 20px */
    --text-xl:    1.5rem;     /* 24px */
    --text-2xl:   2rem;       /* 32px */
    --text-3xl:   2.5rem;     /* 40px */
    --text-4xl:   3rem;       /* 48px */
    --text-5xl:   4rem;       /* 64px */

    /* =====================
       TYPOGRAPHY — WEIGHTS
    ===================== */
    --font-light:   300;
    --font-regular: 400;
    --font-medium:  500;
    --font-semibold: 600;
    --font-bold:    700;

    /* =====================
       TYPOGRAPHY — LINE HEIGHT
    ===================== */
    --leading-tight:  1.2;
    --leading-snug:   1.4;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* =====================
       TYPOGRAPHY — LETTER SPACING
    ===================== */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;
    --tracking-widest:  0.2em;

    /* =====================
       SPACING SCALE
    ===================== */
    --space-1:   0.25rem;   /* 4px */
    --space-2:   0.5rem;    /* 8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */
    --space-32:  8rem;      /* 128px */

    /* =====================
       LAYOUT
    ===================== */
    --container-max:      1320px;   /* Max site width */
    --container-padding:  1.5rem;   /* Side padding on mobile */
    --header-height:      80px;     /* Navbar height */
    --header-height-scroll: 60px;   /* Navbar height when scrolled */

    /* =====================
       BORDERS
    ===================== */
    --border-color:         #F2EEEC;
    --border-color-dark:    #2C2C2C;
    --border-width:         1px;
    --border-width-thick:   2px;

    /* =====================
       BORDER RADIUS
    ===================== */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-full:  9999px;   /* Pill shape */
    --radius-none:  0px;      /* Sharp edges */

    /* =====================
       SHADOWS
    ===================== */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:   0 8px 32px rgba(0,0,0,0.14);
    --shadow-xl:   0 16px 48px rgba(0,0,0,0.18);
    --shadow-pink: 0 4px 20px rgba(201,120,138,0.25);  /* Branded glow */

    /* =====================
       TRANSITIONS
    ===================== */
    --transition-fast:    0.15s ease;
    --transition-base:    0.3s ease;
    --transition-slow:    0.5s ease;
    --transition-bounce:  0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* =====================
       Z-INDEX LAYERS
    ===================== */
    --z-below:    -1;
    --z-base:      0;
    --z-above:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-header:   300;
    --z-overlay:  400;
    --z-modal:    500;
    --z-toast:    600;
}