:root {
  /* ===========================================================
       TYPOGRAPHY
    =========================================================== */

  --ff-heading: "Cormorant Garamond", serif;
  --ff-body: "Plus Jakarta Sans", sans-serif;

  /* ===========================================================
       PRIMARY COLORS
    =========================================================== */

  --clr-primary: #36543b;
  --clr-primary-light: #4c6e51;
  --clr-primary-dark: #233628;

  /* ===========================================================
       SECONDARY COLORS
    =========================================================== */

  --clr-secondary: #b9985a;
  --clr-secondary-light: #d8be8a;
  --clr-secondary-dark: #8c6c37;

  /* ===========================================================
       BACKGROUND
    =========================================================== */

  --clr-bg: #f8f7f4;
  --clr-surface: #ffffff;
  --clr-section: #f4f1eb;
  --clr-footer: #243424;

  /* ===========================================================
       TEXT
    =========================================================== */

  --clr-text: #2e2e2e;
  --clr-text-light: #5e5e5e;
  --clr-text-white: #ffffff;
  --clr-text-muted: #8a8a8a;

  /* ===========================================================
       Font Size
    =========================================================== */
  --fs-display: clamp(3rem, 5vw, 5rem);

  --fs-h1: clamp(2.5rem, 4vw, 3.8rem);

  --fs-h2: clamp(2rem, 3vw, 3rem);

  --fs-h3: 1.8rem;

  --fs-h4: 1.4rem;

  --fs-body-lg: 1.15rem;

  --fs-body: 1rem;

  --fs-small: 0.92rem;

  /* ===========================================================
       BORDER
    =========================================================== */

  --clr-border: #e4e1da;
  --clr-border-dark: #cbc6bc;

  /* ===========================================================
       STATE
    =========================================================== */

  --clr-success: #5a8f4a;
  --clr-warning: #d3a23f;
  --clr-danger: #b54848;
  --clr-info: #4a7aa8;

  /* ===========================================================
       SHADOW
    =========================================================== */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);

  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);

  --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.12);

  /* ===========================================================
       BORDER RADIUS
    =========================================================== */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ===========================================================
       CONTAINER
    =========================================================== */

  --container: 1280px;
  --container-wide: 1440px;

  /* ===========================================================
       SECTION SPACING
    =========================================================== */

  --section-space: 3rem;
  --section-space-lg: 10rem;

  /* ===========================================================
       TRANSITION
    =========================================================== */

  --transition: all 0.35s ease;

  /* ===========================================================
       NAVBAR
    =========================================================== */

  --navbar-height: 88px;
  --topbar-height: 38px;

  /* ===========================================================
       Z INDEX
    =========================================================== */

  --z-topbar: 900;
  --z-navbar: 950;
  --z-dropdown: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;

  --pad-inline: 80px;
}