/* ================= THEME VARIABLES ================= */

@font-face {
    font-family: 'DG Trika';
    src: url("../assets/fonts/DG-Trika-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}



:root {

    --orange-500: #FF5100;
    --teal-500: #0C5F5C;
    --teal-100: #D8F1EE;
    --gray-100: #ffffff;
    --gray-500: #acacac;
    --gray-900: #222222;
    --card-bg: #f3f3f3;

    --alert-radius-lg: 18px;
    --alert-radius-md: 14px;
  
    --alert-padding-lg: 1rem 1.25rem;
    --alert-padding-md: 0.85rem 1.1rem;
    --alert-padding-sm: 0.65rem 0.9rem;
  
    --alert-font-size-lg: 1rem;
    --alert-font-size-md: 0.95rem;
    --alert-font-size-sm: 0.85rem;
  
    --alert-shadow-soft: 0 8px 25px rgba(0,0,0,0.08);
    --alert-shadow-strong: 0 14px 40px rgba(0,0,0,0.15);
  
    --alert-border-width: 1px;


    --body-bg: var(--teal-100);
    --text-white: var(--gray-100);
    --text-invert: var(--gray-100);
    --text-primary: var(--orange-500);
    --text-primary-invert: var(--gray-100);
    --text-secondary: var(--teal-500);
    --text-secondary-invert: var(--teal-500);


    --gradient-primary: linear-gradient(180deg,
            var(--body-bg),
            var(--gray-100));

    --gradient-primary-invert: linear-gradient(0deg,
            var(--body-bg),
            var(--gray-100));


    --gradient-both: linear-gradient(to right,
            transparent 0%,
            /* start thin */
            #0C5F5C 25%,
            /* start thickening */
            #0C5F5C 75%,
            /* center bold area */
            transparent 100%
            /* end thin */
        );


    --gradient-secondary: linear-gradient(to right,
            transparent 0%,
            /* start thin */
            #FF5100 25%,
            /* start thickening */
            #FF5100 75%,
            /* center bold area */
            transparent 100%
            /* end thin */
        );


    --gradient-both-invert: linear-gradient(to right,
            transparent 0%,
            /* start thin */
            #e3f8f7 25%,
            /* start thickening */
            #94c7c5 75%,
            /* center bold area */
            transparent 100%
            /* end thin */
        );
}

body.dark-mode {

    --orange-500: #FF5100;
    --teal-500: #0C5F5C;
    --teal-100: #D8F1EE;
    --gray-100: #ffffff;
    --gray-500: #acacac;
    --gray-900: #222222;
    --card-bg: #1c1c1c;



    --body-bg: var(--gray-900);
    --text-white: var(--gray-100);
    --text-invert: var(--gray-900);
    --text-primary: var(--orange-500);
    --text-primary-invert: var(--gray-900);
    --text-secondary: var(--teal-500);
    --text-secondary-invert: var(--gray-100);


    --gradient-primary: linear-gradient(180deg,
            var(--body-bg),
            var(--teal-500));

    --gradient-primary-invert: linear-gradient(0deg,
            var(--body-bg),
            var(--teal-500));

    --gradient-both: linear-gradient(to right,
            transparent 0%,
            /* start thin */
            #b2e4e2 25%,
            /* start thickening */
            #61a5a3 75%,
            /* center bold area */
            transparent 100%
            /* end thin */
        );

}

body {
    font-family: 'DG Trika', sans-serif;
    margin: 0;
    background: var(--body-bg);
    /* background: white; */
    padding: 0;
    box-sizing: border-box;

}