/* ============================================
   BHIVE DESIGN SYSTEM - CSS Variables
   ============================================ */

:root {

  --f-sans: 'Founders Grotesk Condensed', Arial, sans-serif;
  --f-serif: 'Signifier', Georgia, serif;
  --f-pitch: 'Pitch Sans', Arial, sans-serif;

   font-size: 20px; /* 1rem = 20px */

    /* Desktop 1Rem = 20px */
    /* Mobile 1Rem = 16px */

  /* Typography Scale */

/*  Fh = Font Hero
    Fl = Font Large
    Fm = Font Medium
    Fr = Font Small
    Fs = Font Small
    Fb = Font Body
    Fc = Font Caption*/



  --Fh: clamp(3.2rem, 10vw, 6.4rem); /* Desktop 128px Mobile 64px */
  --Fxxxl: clamp(1.5rem, 8vw, 4rem);
  --Fxxl: clamp(1.2rem, 8vw, 3rem);
  --Fxl: 1.8rem;
  --Fl: 1.6rem;
  --Fm: 1.2rem;/* Desktop 24px */
  --Fr: 1rem;  /* Desktop 20px */
  --Fs: 0.9rem; /* Desktop 18px */
  --Fb: 0.8rem; /* Desktop 16px */
  --Fc: 0.75rem;

  --F16: 0.8rem; /* Desktop 16px */
  --F20: 1rem; /* Desktop 20px */
  --F24: 1.25rem; /* Desktop 20px */
  --F32: 1.6rem; /* Desktop 32px */
  --F36: 1.8rem; /* Desktop 36px */

  --MF24: 1.5rem; /* Mobile 24px */
  --MF48: 2.4rem; /* Mobile 48px */

  
  /* Brand Colors */
  --cream: #F6F5F0;
  --black: #000000;
  --white: #ffffff;
  --yellow: #FFC82D;
  --orange: #EE602B;
  --red: #7E072A;
  --darkred: #530015;
  --darkbrown: #372822;
  --lightgrey: #E2E3E7;
  

  /* Grid Configuration */
  --grid-columns: 12;
  --grid-gap: 1.8rem;  /* Desktop 36px */

  
  /* Spacing System */
  --Pm: 1.8rem;
  --Ps: 1.6rem;
  --Ph: calc(0.5 * var(--Pm));
  --Pd: calc(2 * var(--Pm));
  
  /* Layout */
  --Hh: 3.75rem;
  --container-width: 1200px;
  --container-width-narrow: 800px;
  --container-width-wide: 1400px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;


  /* Home Page Hero Banner Height */
  --hero-height:80vh;
  

}




@media (max-width: 1024px) {

  :root {
    /*font-size: 16px;  /* Mobile 1rem = 16px */
    --grid-gap: 1.5rem;  /* Mobile 24px */

  /* Spacing System */
    --Pm: 1.5rem;
    --Ps: 1.6rem;
    --Ph: calc(0.5 * var(--Pm));
    --Pd: calc(2 * var(--Pm));

/* Font Sizing */
    /*--Fh: 3.2rem; /* Desktop 128px */
    --Fxxl: 3rem;
    --Fxl: 1.8rem;
    --Fl: 1.6rem;
    --Fm: 1.2rem;/* Desktop 24px */
    --Fr: 1rem;  /* Desktop 20px */
    --Fs: 0.9rem; /* Desktop 18px */
    --Fb: 0.8rem; /* Desktop 16px */
    --Fc: 0.75rem;

    --F16: 0.8rem; /* Desktop 16px */
    --F20: 1rem; /* Desktop 20px */
    --F24: 1.25rem; /* Desktop 20px */
    --F32: 1.6rem; /* Desktop 32px */
    --F36: 1.8rem; /* Desktop 36px */


    }

}