:root {
    /* ---------- Colors ---------- */
    --primary: #E3651D;
    --secondary: #750E21;
    --bg: #ffffff;
    --secondary-bg: #f3f4f6;
    --card: #f8f8f8;
    --title: #242427;
    --sub-title: #9b9898;
    --desc: #191919;
    --accent: #BED754;
    --neutral: #374151;
    --border-color: #e5e7eb;
    --info: #3b82f6;
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    /* ---------- Fonts ---------- */
    /* --font-primary: 'Product Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; */
    --font-primary: 'Product Sans', system-ui, -apple-system, sans-serif;
    /* --font-title: 'Product Sans', system-ui, sans-serif; */
    --font-title: 'Cinzel', serif;
    --font-desc: 'Product Sans', system-ui, sans-serif;
    /* ---------- Title Typography ---------- */
    --title-font-family: var(--font-title);
    --title-font-size: 40px;
    --title-font-weight: 500;
    --title-line-height: 1.15;
    --title-letter-spacing: -0.02em;
    --title-color: var(--title);
    --callback-color: #f3f4f6;
    /* ---------- Description Typography ---------- */
    --desc-font-family: var(--font-desc);
    --desc-font-size: 15px;
    --desc-font-weight: 400;
    --desc-line-height: 1.7;
    --desc-letter-spacing: 0.01em;
    --desc-color: var(--sub-title);
    /* company logo color */
    --logo-color: #22c55e;
}

.title-request {
    font-family: var(--title-font-family);
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    letter-spacing: var(--title-letter-spacing);
}

.callback-title {
    font-family: var(--title-font-family);
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    letter-spacing: var(--title-letter-spacing);
    color: var(--callback-color);
}

.title {
    font-family: var(--title-font-family);
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    letter-spacing: var(--title-letter-spacing);
    color: var(--title-color);
}

.desc {
    font-family: var(--desc-font-family);
    font-size: var(--desc-font-size);
    font-weight: var(--desc-font-weight);
    line-height: var(--desc-line-height);
    letter-spacing: var(--desc-letter-spacing);
    color: var(--desc-color);
}

.navbar-font {
    font-family: "Plus Jakarta Sans", sans-serif;
}


/* .logo-color {
    --green-500: #22c55e;
    color: var(--green-500);
} */


/* Dark mode using data-theme attribute */

[data-theme="dark"] {
    /* -- Dark Mode Colors -- */
    --primary: #E3651D;
    /* Orange */
    --secondary: #750E21;
    /* Dark Red */
    --bg: #181818;
    /* Main background (Dark Gray) */
    --secondary-bg: #750E21;
    /* Secondary background (Dark Red) */
    --card: #131313;
    /* Card background */
    --title: #ff7332;
    /* Text color (Light Green) */
    --sub-title: #BED754;
    /* Text color */
    --desc: #BED754;
    /* Text color */
    --accent: #BED754;
    /* Light Green */
    --neutral: #750E21;
    /* Dark Red */
    --border-color: #E3651D;
    /* Borders (Orange) */
    --info: #58c7f3;
    --success: #00ff00;
    /* Brighter green */
    --warning: #f3cc30;
    --error: #ff0000;
    /* Brighter red */
}


/* Support prefers-color-scheme for automatic detection */

@media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]) {
        /* -- Dark Mode Colors -- */
        --primary: #E3651D;
        /* Orange */
        --secondary: #750E21;
        /* Dark Red */
        --bg: #181818;
        /* Main background (Dark Gray) */
        --secondary-bg: #750E21;
        /* Secondary background (Dark Red) */
        --card: #131313;
        /* Card background */
        --title: #ff7332;
        /* Text color (Light Green) */
        --sub-title: #ececec;
        /* Text color */
        --desc: #e9e9e9;
        /* Text color */
        --accent: #BED754;
        /* Light Green */
        --neutral: #750E21;
        /* Dark Red */
        --border-color: #E3651D;
        /* Borders (Orange) */
        --info: #58c7f3;
        --success: #00ff00;
        /* Brighter green */
        --warning: #f3cc30;
        --error: #ff0000;
        /* Brighter red */
    }
}

body {
    background-color: var(--bg);
    color: var(--title);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    font-family: "Inter", sans-serif;
}

.container {
    width: 100%;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}


}

}