/* ═══════════════════════════════════════════════════════════
   VARIABLES — Design Tokens & Color System
   The complete Unity Square palette and typography config.
   Edit these to change the entire look of the site.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Earth Tone Scale (sage green palette) ── */
    --earth-900: #2A3326;
    --earth-800: #354030;
    --earth-700: #404E3B;
    --earth-600: #5A6B54;
    --earth-500: #6C8480;
    --earth-400: #7B9669;
    --earth-300: #9DB38E;
    --earth-200: #BAC8B1;
    --earth-100: #D4DED0;
    --earth-50:  #E6E6E6;
    --earth-25:  #F0F2EE;
    --earth-0:   #F7F8F6;

    /* ── Green Accent Scale ── */
    --gold-700: #3E5435;
    --gold-600: #4A6342;
    --gold-500: #5A7A4E;
    --gold-400: #7B9669;
    --gold-300: #93AC80;
    --gold-200: #BAC8B1;
    --gold-100: #DDE5D8;

    /* ── Sage Green Scale ── */
    --sage-600: #404E3B;
    --sage-500: #5A6B54;
    --sage-400: #6B8F5E;
    --sage-300: #7B9669;
    --sage-200: #9DB38E;

    /* ── Suite Type Colors (sage green palette) ── */
    --salon-fill: #7B9669;
    --salon-top: #93AC80;
    --salon-side: #5A6B54;
    --salon-hover: #BAC8B1;

    --office-fill: #6C8480;
    --office-top: #85A09C;
    --office-side: #4E6360;
    --office-hover: #A8BDB9;

    --deluxe-fill: #8FA055;
    --deluxe-top: #A8B870;
    --deluxe-side: #6B7A40;
    --deluxe-hover: #C4D0A0;

    --barber-fill: #404E3B;
    --barber-top: #5A6B54;
    --barber-side: #2A3326;
    --barber-hover: #7B9669;

    --beautician-fill: #6C8480;
    --beautician-top: #7B9669;
    --beautician-side: #5A6B54;
    --beautician-hover: #9DB38E;

    /* ── Typography (sans-serif primary, serif for accents) ── */
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Warm Accent ── */
    --copper-500: #7B9669;
    --copper-400: #93AC80;
    --copper-300: #BAC8B1;

    /* ── Border Radius Scale (larger = more modern) ── */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-full: 50px;

    /* ── Spacing Scale ── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 72px;
    --space-4xl: 120px;

    /* ── Transitions ── */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.22, 0.68, 0, 1.2);
}