/* ============================================================
   GLOBAL DESIGN TOKENS — blayne pacelli realtor
   Change values here and they update across the entire site.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     BRAND COLORS — based on current site
     ---------------------------------------------------------- */
  --color-primary:        #f2e33b;   /* yellow — buttons, accents */
  --color-primary-dark:   #C9BC1F;   /* hover states */
  --color-primary-light:  #F0E8D5;   /* tints, backgrounds */

  --color-secondary:      #1A1A1A;   /* near black — headings, footer */
  --color-secondary-light:#2E4A6A;   /* nav background */

  --color-white:          #FFFFFF;
  --color-off-white:      #F8F7F4;
  --color-gray-100:       #F1EEE8;
  --color-gray-200:       #E2DDD5;
  --color-gray-400:       #9E9890;
  --color-gray-600:       #5A5650;
  --color-gray-800:       #2C2A27;

  /* ----------------------------------------------------------
     SEMANTIC — what things USE
     ---------------------------------------------------------- */
  --color-text:           var(--color-gray-800);
  --color-text-muted:     var(--color-gray-600);
  --color-text-subtle:    var(--color-gray-400);
  --color-text-inverse:   var(--color-white);
  --color-text-heading:   var(--color-secondary);

  --color-bg-page:        var(--color-white);
  --color-bg-section:     var(--color-off-white);
  --color-bg-dark:        var(--color-secondary);
  --color-bg-gold:        var(--color-primary);

  --color-border:         var(--color-gray-200);
  --color-border-focus:   var(--color-primary);

  --color-link:           var(--color-primary-dark);
  --color-link-hover:     var(--color-primary);

  /* ----------------------------------------------------------
     BUTTONS
     ---------------------------------------------------------- */
  --btn-primary-bg:       var(--color-primary);
  --btn-primary-text:     var(--color-secondary);
  --btn-primary-hover:    var(--color-primary-dark);

  --btn-secondary-bg:     transparent;
  --btn-secondary-text:   var(--color-primary);
  --btn-secondary-border: var(--color-primary);

  /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
--space-7: 1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max:     1200px;
  --container-narrow:  820px;
  --container-padding: 1.5rem;

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
--radius-xl: 16px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;

 /* ----------------------------------------------------------
     Z Index
     ---------------------------------------------------------- */
	--z-below:    -1;
	--z-base:      0;
	--z-raised:   10;
	--z-dropdown: 600;
	--z-sticky:   500;
	--z-overlay:  300;
	--z-modal:    700;
	--z-toast:    800;

}