:root {
    --baseBgColor: hsl(223, 18%, 20%);
    --primaryBgColor: hsl(from var(--baseBgColor) h s calc(l + 10));
    /* primary */
    --secondaryBgColor: hsl(from var(--baseBgColor) h s calc(l + 20));
    /* secondary */
    --primaryBgColorBlack: hsl(from var(--baseBgColor) h s calc(l - 10));
    /* black */
    --primaryBgColorDarker: hsl(from var(--baseBgColor) h s calc(l - 5));
    /* darker */

    --contentBgColor: hsl(from var(--baseBgColor) h s calc(l + 70));

    /* --primaryBgColor: hsl(216, 15%, 6%); */
    /* --primaryColor: hsl(216, 15%, 6%); */
    --baseTextColor: hsl(44, 48%, 95%);
    --primaryTextColor: hsl(from var(--baseTextColor) h s calc(l - 10));
    --primaryTextDarkColor: hsl(from var(--baseBgColor) h s calc(l - 10));

    /* --primaryTextColor: hsl(44, 48%, 95%); */

    --redColor: rgb(213, 16, 16);
    --yellowColor: hsl(47, 96%, 53%);
    --greenColor: hsl(120, 100%, 25%);
    --blueColor: hsl(246, 84%, 40%);
    --greenColor500: #0e9f6e;

    --hoverBgColor: #334155;
    /* --hoverColor: #38bdf8; */
    --hoverColor: var(--blueColor);


    /* Shade of white */
    --boneWhite: #f9f6ee;
    --grayColor50: #f9fafb;
    --grayColor100: #f3f4f6;
    --grayColor200: #e5e7eb;
    --grayColor300: #d1d5db;
    --grayColor400: #9ca3af;
    --grayColor500: #6b7280;
    --grayColor600: #4b5563;
    --grayColor700: #374151;
    --grayColor800: #1f2937;
    --grayColor900: #111827;

    /* shade of black */
    --black2: rgba(0, 0, 0, 0.2);
    --black3: rgba(0, 0, 0, 0.3);
    --black4: rgba(0, 0, 0, 0.4);
    --black5: rgba(0, 0, 0, 0.5);
    --black6: rgba(0, 0, 0, 0.6);
    --black7: rgba(0, 0, 0, 0.7);
    --black8: var(--primaryBgColorDarker);
    --black9: rgba(0, 0, 0, 0.9);
    --black: rgba(0, 0, 0, 1);
    --white: rgba(225, 225, 225, 1);

    --helptextColor: var(--grayColor400);
    --errorlistColor: var(--redColor);


    --font-size-xl: 1.5rem;
    --font-size-lg: 1.125rem;
    --font-size-base: 1rem;
    --font-size-sm: 0.75rem;
    --font-size-xs: 0.5rem;
    --font-size-xxs: 0.25rem;

    --margin-2xl: 2rem;
    --margin-xl: 1.5rem;
    --margin-lg: 1.125rem;
    --margin-base: 1rem;
    --margin-sm: 0.75rem;
    --margin-xs: 0.5rem;
    --margin-xxs: 0.25rem;

    --padding-2xl: 2rem;
    --padding-xl: 1.5rem;
    --padding-lg: 1.125rem;
    --padding-base: 1rem;
    --padding-sm: 0.75rem;
    --padding-xs: 0.5rem;
    --padding-xxs: 0.25rem;

    --gap-xl: 1.5rem;
    --gap-lg: 1.125rem;
    --gap-base: 1rem;
    --gap-sm: 0.75rem;
    --gap-xs: 0.5rem;
    --gap-xxs: 0.25rem;

    --border-radius-xl: 1.5rem;
    --border-radius-lg: 1.125rem;
    --border-radius-base: 1rem;
    --border-radius-sm: 0.75rem;
    --border-radius-xs: 0.5rem;
    --border-radius-xxs: 0.25rem;
}

#html-body {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    overflow-y: scroll;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
    /* font-family: 'Poppins', sans-serif; */
    font-size: 1rem;
}

#main {
    position: relative;
    flex: 1 1 0%;
    
    overflow-x: hidden;
}


.main--body--color {
    background-color: var(--grayColor300);
}

.content--area {
    /* background-color: var(--grayColor200); */
    background-color: var(--contentBgColor);
    border: 1px solid var(--grayColor200);
    border-radius: var(--border-radius-xxs);
    padding: var(--padding-xs);
    /* height: 100vh; */
}

.active--action--button {
    background-color: #374151;
}


.auto__grid--200 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

.auto__grid--300 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

.auto__grid--350 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

.auto__grid--400 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

.auto__grid--500 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
    gap: 1rem;
    justify-content: center;
    width: 100%;
}


.animate--area {
    /* background-color: var(--grayColor100); */
    background-color: transparent;
    padding: var(--padding-base);
    border-radius: 0.5rem ;
    animation: animateArea 250ms ease-in;
}


/* Animations */
@keyframes animateArea {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* FadeIn Animations */
.fade--in--animation {
    animation: fadeInAnimation 400ms ease-in-out;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in and scale object */
.fade---in--scale {
    scale: .8;
    opacity: 0;
    animation: fade---in--scale linear forwards;
    animation-timeline: view();
    animation-range-start: 200px;
    animation-range-end: 500px;
}


/* fade---in--scale animation */
@keyframes fade---in--scale {
    to {
        scale: 1;
        opacity: 1;
    }
}

.scale--button {
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}

.scale--button:hover {
    box-shadow: 0.5em 0.5em 2em lightgrey;
    transform: scale(1.3, 1.3);
}


/* card */
.card {
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}

.card:hover {
    box-shadow: 0.5em 0.5em 2em lightgrey;
    transform: scale(1.03, 1.03);
}

.card img {
    transition-property: all;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
}

.card img:hover {
    transform: scale(1.05, 1.05);
    /* transform: rotate(360deg); */
    transform: skew(30deg, -30deg);
}


/* Additional styling for better visual hierarchy */
.section--divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    margin: var(--margin-xs) 0;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge--primary {
    background-color: #e0e7ff;
    color: var(--blueColor);
}

.badge--success {
    background-color: #d1fae5;
    color: var(--greenColor);
}

.badge--info {
    background: var(#e4c756);
    color: var(--yellowColor);
}

.badge--warning {
    background-color: #fef3c7;
    color: var(--redColor);
}

.badge--neutral {
    background: var(--grayColor300);
    color: var(--grayColor600);
}


.attention__notice {
    background: #fffaf0;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    padding: var(--padding-base);
    margin-top: var(--margin-xs);
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}
    
.attention__notice::before {
    content: "⚠️";
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

.attention__notice p {
    color: #744210;
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.5;
}



/* input and select styles  */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="email"],
select,
textarea {
    width: 100%;
    color: var(--grayColor900);
    background-color: var(--grayColor50);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-inline: 0.625rem;
    padding-block: 2.5rem;
    padding: 0.625rem 2.5rem 0.625rem 2.5rem;
    border-style: solid;
    border-width: 0.5px;
    border-color: var(--primaryBgColor);
    border-radius: 0.5rem;
    /* outline: none;  */
    transition: all ease-in 250ms;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="checkbox"]:focus,
select:focus,
textarea:focus {
    border-color: var(--primaryBgColor);
    /* focus:border-green-500 */
    box-shadow: 0 0 0 1px var(--primaryBgColor);
    /* focus:ring-green-500 */
}

input[type="file"] {
    width: 100%;
    border: 1px solid var(--primaryBgColor);
    border-radius: 0.25rem;
    margin-top: 1rem;
}

input[type="checkbox"] {
    color: var(--grayColor900);
    border-style: solid;
    border-width: 0.5px;
    border-color: var(--primaryBgColor);
    border-radius: 20%;
    transition: all ease-in 250ms;
    /* outline: none;  */
}

input[type='checkbox']:checked {
    color: var(--primaryBgColor);
    outline-color: var(--primaryBgColor);
}

input[type='checkbox']:active {
    color: var(--primaryBgColor);

}

select[name="subject"],
select[name="topic"],
select[name="action"],
select[name="filter"] {
    border: 1px solid var(--primaryBgColor);
    border-radius: 0.5rem;
}

select[name="subject"]:focus,
select[name="topic"]:focus,
select[name="action"]:focus,
select[name="filter"]:focus {
    border-color: var(--primaryBgColor);
    /* focus:border-green-500 */
    box-shadow: 0 0 0 1px var(--primaryBgColor);
    /* focus:ring-green-500 */
}

.helptext,
.errorlist {
    font-style: italic;
    font-size: 0.75rem;
    font-weight: 500;
    /* opacity: 0.8; */
}

.errorlist {
    color: var(--errorlistColor);
}

.helptext {
    color: var(--helptextColor);
}