:root {
  /* === Neutral Colors === */
  --color-gold: #C9A33E;
  --color-black: #000000;
  --color-grey: #231F20;
  --color-blue: rgba(97, 232, 225, 1);
  --color-white: #FFFFFF;

  /* === Colours On The About Us === */
  --card-gold: rgba(201, 163, 62, 1);
  --card-grey: rgba(35, 31, 32, 1);
  --card-white: rgba(255, 255, 255, 1);
  --platinum : rgba(187, 187, 187, 0.7);
  --card-low-opacity-gold: rgba(201, 163, 62, 0.7);
  
  /* === Gradients === */
  --gradient-black: linear-gradient(to right, rgba(36, 31, 32, 1), rgba(140, 140, 140, 1));
  --gradient-gold: linear-gradient(to right, rgba(255, 228, 156, 1), rgba(158, 126, 41, 1));
  --gradient-grey: linear-gradient(rgba(35, 31, 32, 1), rgba(140, 140, 140, 1));

  
    /* 🖋️ Typography */
  --font-heading: "Saira", sans-serif;
  --font-main: "Montserrat", sans-serif;


  /* font sizes */
  --font-size-h1: 10rem; 
  --inside-banner-h1: 4rem;
  --font-size-h2: 6rem;
  --font-size-h3: 3.25rem;
  --font-size-h4: 2.1875rem;
  --font-size-h5: 1.5rem;
  --font-size-base: 16px;
  
    /* 📏 Spacing */
  --space-xxs: 0.15rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-xxl: 5rem;
  --space-base: 9rem;

  /* 🔲 Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;

  /* 🌙 Shadow & Transition */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
  --transition: all 0.3s ease-in-out;  
  
}