:root {
    /* Font families */
    --font-body: "Inter Display", Arial, sans-serif;
/* 	--font-body: "Plus Jakarta Sans", Arial, sans-serif; */
    --font-heading: "Beautique Display", Georgia, serif;

    /* Brand colors */
    --color-primary: #0a231e;
    --color-primary-hover: #123b33;
    --color-secondary: #663425;
    --color-secondary-hover: #7a4230;
	--color-secondary-2: #FBEFDD;

    /* Text colors */
    --color-heading: #0a231e;
    --color-text: #1B1B1B;
    --color-text-light: #6d726f;
    --color-text-white: #fff;
    --color-text-black: #1B1B1B;

    /* Background colors */
    --color-white: #fff;
    --color-background: #f7f6f3;
    --color-background-light: #f2f1ed;
    --color-background-dark: #0a231e;

    /* Border colors */
    --color-border: rgba(10, 35, 30, 0.12);
    --color-border-light: rgba(10, 35, 30, 0.07);

    /* System colors */
    --color-success: #7a9c59;
    --color-alert: #b20000;

    /* Flatsome colors */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --success-color: var(--color-success);
    --alert-color: var(--color-alert);

    /* Display font sizes */
    --fs-display-xl: clamp(48px, 5.56vw, 80px);
    --fs-display-lg: clamp(42px, 4.45vw, 64px);
    --fs-display-md: clamp(38px, 3.9vw, 56px);
    --fs-display-sm: clamp(34px, 3.34vw, 48px);

    /* Heading font sizes */
    --fs-h1: clamp(34px, 4.8vw, 56px);
    --fs-h2: clamp(30px, 3.6vw, 42px);
    --fs-h3: clamp(26px, 2.78vw, 40px);
    --fs-h4: clamp(22px, 2.2vw, 32px);
    --fs-h5: clamp(18px, 2vw, 24px);
    --fs-h6: clamp(16px, 1.8vw, 20px);

    /* Body font sizes */
    --fs-body-xl: clamp(18px, 1.8vw, 22px);
    --fs-body-lg: clamp(16px, 1.6vw, 18px);
    --fs-body: clamp(14px, 1.4vw, 16px);
    --fs-body-sm: clamp(13px, 1.3vw, 14px);
    --fs-body-xs: clamp(11px, 1.1vw, 12px);

    /* Component font sizes */
    --fs-nav: clamp(12px, 1.2vw, 14px);
    --fs-button: clamp(12px, 1.4vw, 16px);
    --fs-label: clamp(12px, 1.2vw, 14px);
    --fs-caption: clamp(11px, 1.1vw, 12px);

    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* Line heights */
    --lh-heading-tight: 0.95;
    --lh-heading: 1.1;
    --lh-heading-relaxed: 1.2;
    --lh-body-tight: 1.4;
    --lh-body: 1.55;
    --lh-body-relaxed: 1.7;

    /* Letter spacing */
    --ls-heading: clamp(-1.5px, -0.1vw, -0.5px);
    --ls-normal: 0;
    --ls-uppercase: 0.03em;

    /* Header */
    --header-height: clamp(64px, 5.55vw, 72px);
    --header-space-x: clamp(16px, 2.6vw, 36px);
    --header-space-top: clamp(10px, 1.1vw, 15px);
    --header-padding-x: clamp(18px, 2.1vw, 36px);
    --header-radius: 999px;
    --header-text: var(--color-text);
    --header-white: var(--color-white);
    --header-border: var(--color-border-light);

    /* Hero layout */
    --hero-height: clamp(560px, 80vw, 960px);
    --hero-padding-x: clamp(20px, 5vw, 72px);
    --hero-padding-bottom: clamp(36px, 4.5vw, 64px);
    --hero-content-width: clamp(320px, 70vw, 980px);

    /* Global button */
    --btn-height: clamp(44px, 3.33vw, 48px);
    --btn-padding-x: clamp(24px, 2.5vw, 36px);
    --btn-radius: 999px;
    --btn-transition: 0.25s ease;
    --btn-gradient-start: #663425;
    --btn-gradient-end: #0a231e;

    /* Global section label */
    --label-height: clamp(24px, 2.08vw, 28px);
    --label-padding-y: clamp(4px, 0.42vw, 6px);
    --label-padding-x: clamp(12px, 1.12vw, 16px);
    --label-radius-sm: 4px;
    --label-color: var(--color-primary);
    --label-background:
        linear-gradient(
            137.7deg,
            rgba(204, 150, 84, 0.5) -10.21%,
            rgba(255, 255, 255, 0) 169.3%
        ),
        rgba(255, 255, 255, 0.2);
}