/* Color Palette */
:root {
    --main-color: #DB5F15;  /* Blue */
    --second-color: #373A40; /* Green */
    --third-color: #112B3C; /* Third*/
    --accent-color: #f39c12; /* Yellow */
    --background-color: #ecf0f1; /* Light Gray */
    --text-color: #686D76; /* Dark Gray */
    --border-color: #bdc3c7; /* Border color */
    --link-color: #2980b9; /* Link color */
    --error-color: #e74c3c; /* Error color */
    --warning-color: #f1c40f; /* Warning color */
    --success-color: #2ecc71; /* Success color */
    --white:#fff; /* White */
    --black: #000; /* Black */
	--fc-dark-90: #333333;
    --color-plomo: #efefef;
}

/*          Gradient of the Main Color              */

:root{
    --main-50: #82310c;
    --main-60: #a1390b;
    --main-70:#cc4902;
    --main-80: #ff7f0a;
    --main-90:#ff9d32;
    --main-100: #ffc26d;
    --main-110:#ffdca5;
    --main-120:#fff0d3;
    --main-130:#fff8ec;
}

/*          Typography              */
:root {
    --main-font: 'Salkantay',sans-serif !important;
    --font-base: 16px;
    --font-sm: 14px;
    --font-lg: 18px;
    --line-height-base: 1.5;
    --heading-font-weight: bold;
}

/* Spacing (Padding / Margin) */
:root {
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 40px;
}

/* Border Radius */
:root {
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
}

/* Shadows */
:root {
    --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
    --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
    --box-shadow-dark: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Breakpoints for Responsive Design */
:root {
    --breakpoint-xs: 480px; /* Extra Small Devices */
    --breakpoint-sm: 768px; /* Small Devices */
    --breakpoint-md: 1024px; /* Medium Devices */
    --breakpoint-lg: 1200px; /* Large Devices */
}

/* Miscellaneous */
:root {
    --transition-duration: 0.3s;
    --transition-ease: ease-in-out;
}

body {
    font-family: var(--main-font);
}