/* ===================================================
    COLORS & VARIABLES
   =================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
}

@font-face {
  font-family: 'AvenirNextITPro';
  src: url('../font/Avenir\ Next\ LT\ Pro\ Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Then apply it globally */
body {
  font-family: 'AvenirNextITPro', sans-serif;
}

:root {
  /*  Primary Colors */
  --primary-color: #FEFAF6;      /* Main brownish-gold */
  --primary-dark: #EADBC8;       /* Deeper brown for hover or bold elements */
  --primary-light: #DAC0A3;

  /*  Accent Colors */
  --accent-color: #A67C52;       /* Soft complementary gold */
  --accent-light: #EADDC8;       /* Cream/beige background option */
  --accent-dark: #3E2C1C;        /* Almost chocolate brown for text or contrast */

  /*  Neutrals */
  --white: #FFFFFF;
  --black: #030303;
  --off-white: #F3E2D4;
  --light-gray: #F0ECE7;
  --gray: #B4A89B;

  /*  Text Colors */
  --text-main: #3E2F1C;          /* Rich brown for body text */
  --text-muted: #6F5C45;         /* Softer brown for subtext */
  --heading-color: #5A3F25;      /* Darker gold-brown for headers */

  /*  Shadow and Effects */
  --shadow-color: rgba(0, 0, 0, 0.15);
  --border-color: rgba(139, 100, 59, 0.2);

  /* 🖍 Font Family (optional here) */
  --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}