/* Define CSS variables in the :root pseudo-class or any other selector */
/* :root {
    --primary-color: #ff0000;
    --secondary-color: #e74c3c;
    --primary-text-color: #272727;
    --secondary-text-color: #6d6d6d;
    --primary-text-color-faded: #8080807d;
    --secondary-text-color-faded: #8080807d;
    --invert-primary-text-color: #ffffff;
    --body-bg-color: #ffffff;
    --body-bg-color-off-white: #f8f9fa; 
    --grey-bg: rgb(39,39,39,0.2);
    --grey-bg-color-faded: rgb(--grey-bg)/0.4;
    --base-font-size: 16px;
    --base-font-family: 'Poppins', sans-serif;
    --box-shadow-color: #cbced1;
    --body-bg-color-dark: #414040;
} */

/* 

:root {
    --primary-color: #ff0000;               // red
    --secondary-color: #e74c3c;             // default
    --primary-text-color: #272727;          // dark grey
    --secondary-text-color: #6d6d6d;        // grey
    --primary-text-color-faded: rgb(--primary-text-color)/0.4;
    --secondary-text-color-faded: rgb(--secondary-text-color)/0.4;
    --invert-primary-text-color: #ffffff;   // white
    --body-bg-color: #ffffff;               // white
    --body-bg-color-off-white: #f8f9fa;               // off white
    --grey-bg: rgb(39,39,39,0.2);
    --grey-bg-color-faded: rgb(--grey-bg)/0.4;
    --base-font-size: 16px;
    --base-font-family: 'Poppins', sans-serif;
    --box-shadow-color: #cbced1;
}

*/


:root {
    --primary-color: #d4af37; 
    --secondary-color: #f4a300;
    
    --primary-text-color: #3b2f2f;
    --secondary-text-color: #6d4c41;
    --primary-text-color-faded: rgba(59, 47, 47, 0.6);
    --secondary-text-color-faded: rgba(109, 76, 65, 0.5);
    
    --invert-primary-text-color: #ffffff;

    --body-bg-color: #fdf6e3; /* Light Spiritual Beige */
    --body-bg-color-off-white: #fefaf1;
    --grey-bg: rgba(111, 111, 111, 0.2);
    --grey-bg-color-faded: rgba(111, 111, 111, 0.1);

    --base-font-size: 16px;
    --base-font-family: 'Poppins', sans-serif;

    --box-shadow-color: rgba(212, 175, 55, 0.3);
    --body-bg-color-dark: #3d3b2f; /* Earthy Shadow */
}

  
/* You can also define variables in specific selectors */
/* .container {
    --background-color: #ecf0f1;
} */

body {
    font-size: var(--base-font-size) !important;
    font-family: var(--base-font-family) !important;
}

h1 {
    font-size: calc(var(--base-font-size) * 2.25) !important; /* 36px */
    font-family: var(--base-font-family) !important;
}
  
h2 {
    font-size: calc(var(--base-font-size) * 1.875) !important; /* 30px */
    font-family: var(--base-font-family) !important;
}
  
h3 {
    font-size: calc(var(--base-font-size) * 1.5) !important; /* 24px */
    font-family: var(--base-font-family) !important;
}
  
h4 {
    font-size: calc(var(--base-font-size) * 1.25) !important; /* 20px */
    font-family: var(--base-font-family) !important;
}
  
h5 {
    font-size: var(--base-font-size) !important; /* 16px (base size) */
    font-family: var(--base-font-family) !important;
}
  
h6 {
    font-size: calc(var(--base-font-size) * 0.75) !important; /* 12px */
    font-family: var(--base-font-family) !important;
}
  
p {
    font-size: calc(var(--base-font-size) * 1) !important; /* 16px (base size) */
    font-family: var(--base-font-family) !important;
}

input{
    font-size: calc(var(--base-font-size) * 1) !important; /* 16px (base size) */
    font-family: var(--base-font-family) !important;
}