@import 'tailwindcss';

/* :root {
  --light:#ffffff;
  --dark:#000000;
  --theme-bg:#0A0D16;
  --primary:#5AA397;
  --primary-c5:#74D5C5;
  --secondary:#0D111D;
  --secondary11:#070A11;
  --secondary25:#151925;
  --primary-c1:#91C5C1;
  --secondary27:#171B27;
  --dark-green3c:#24363C;
  --grey92:#748092;
  --grey99:#808599;
  --grey43:#434343;
  --grey33:#333333;
  --grey66:#666666;
  --grey2b:#2B2B2B;
  --grey32:#222632;
  --red:#fb2c36;
} */
/* Base variables (fallback) */
@layer base {
:root {
    --light: #ffffff;
    --dark: #000000;
}

/* 🌞 Light Theme */
:root[data-theme='light'] {
    --light: #000000;
    --theme-bg: #ffffff;
    --secondary: #f2f2f2;
    --secondary11: #ffffff;
    --secondary25: #ffffff;
    --secondary27: #91c5c133;
    --secondary1d: #f2f2f2;
    --card-bg:#f2f2f2;

    --primary: #5aa397;
    --primary-c1: #5aa397;
    --primary-c5: #4cc7b6;

    --grey92: #797979;
    --grey99: #797979;
    --grey43: #374151;
    --grey33: #1f2937;
    --grey66: #6b7280;
    --grey-66: #d9d9d9;
    --grey2b: #dadada;
    --grey32: #d4e2e0;
    --grey31: #313131;
    --grey36: #d4e2e0;
    --grey-de: #797979;
    --grey-f3: #edeff3;

    --marun18: #3f1818;

    --dark-green3c: #5aa39733;
    --red: #fb2c36;
    --green: #00a63e;
    --yellow: #d08700;
    --blue: #2463eb;

    --switch-color: #0d111d;
}

/* 🌙 Dark Theme */
:root[data-theme='dark'] {
    --theme-bg: #0a0d16;
    --secondary: #0d111d;
    --secondary11: #070a11;
    --secondary25: #151925;
    --secondary27: #171b27;
    --secondary1d: #0d111d;
    --card-bg:#171b27;

    --primary: #5aa397;
    --primary-c1: #91c5c1;
    --primary-c5: #74d5c5;

    --grey92: #748092;
    --grey99: #808599;
    --grey43: #434343;
    --grey33: #333333;
    --grey66: #666666;
    --grey-66: #666666;
    --grey2b: #2b2b2b;
    --grey32: #222632;
    --grey31: #313131;
    --grey36: #2b2e36;
    --grey-de: #dedede;
    --grey-f3: #444343;

    --marun18: #3f1818;

    --dark-green3c: #24363c;
    --red: #fb2c36;
    --green: #00a63e;
    --yellow: #d08700;
    --blue: #2463eb;

    --switch-color: #f2f2f2;
}
}
/* @media (prefers-color-scheme: light) {
    :root {
        --theme-bg: #0a0d16;
    }
} */

@theme inline {
    --color-light: var(--light);
    --color-dark: var(--dark);
    --color-theme-bg: var(--theme-bg);
    --color-primary: var(--primary);
    --color-primary-c5: var(--primary-c5);
    --color-secondary: var(--secondary);
    --color-secondary11: var(--secondary11);
    --color-secondary25: var(--secondary25);
    --color-primary-c1: var(--primary-c1);
    --color-secondary27: var(--secondary27);
    --color-secondary1d: var(--secondary1d);
    --color-dark-green3c: var(--dark-green3c);
    --color-grey92: var(--grey92);
    --color-grey99: var(--grey99);
    --color-grey43: var(--grey43);
    --color-grey33: var(--grey33);
    --color-grey66: var(--grey66);
    --color-grey-66: var(--grey-66);
    --color-grey2b: var(--grey2b);
    --color-grey32: var(--grey32);
    --color-grey31: var(--grey31);
    --color-grey36: var(--grey36);
    --color-grey-de: var(--grey-de);
    --color-grey-f3: var(--grey-f3);
    --color-red: var(--red);
    --color-green: var(--green);
    --color-yellow: var(--yellow);
    --color-blue: var(--blue);
    --color-marun18: var(--marun18);
    --color-switch-color: var(--switch-color);
    --color-card-bg: var(--card-bg);
}

@theme {
    --breakpoint-xs: 390px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
}

body {
    background: var(--theme-bg);
    color: var(--light);
    font-family:
        var(--font-mona-sans),
        system-ui,
        -apple-system,
        sans-serif;
}

.scrollbar-0::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.scrollbar-0 {
    scrollbar-width: none;
    /* Firefox */
}

.scrollbar-0::-webkit-scrollbar-thumb {
    background: transparent;
}

.custom-react-select__option {
    background-color: transparent !important;
}

.custom-react-select__input-container .custom-react-select__input {
    color: var(--color-white) !important;
}
.custom-react-select__indicator {
    cursor: pointer;
}
.custom-react-select__multi-value__remove {
    border-radius: 100%;
    padding: 2px;
    cursor: pointer;
}

.custom-react-select__multi-value__remove:hover {
    background-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.site-loader {
    --d: 22px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    color: var(--primary);
    box-shadow:
        calc(1 * var(--d)) calc(0 * var(--d)) 0 0,
        calc(0.707 * var(--d)) calc(0.707 * var(--d)) 0 1px,
        calc(0 * var(--d)) calc(1 * var(--d)) 0 2px,
        calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 3px,
        calc(-1 * var(--d)) calc(0 * var(--d)) 0 4px,
        calc(-0.707 * var(--d)) calc(-0.707 * var(--d)) 0 5px,
        calc(0 * var(--d)) calc(-1 * var(--d)) 0 6px;
    animation: loaderAnimate 1s infinite steps(8);
}
@keyframes loaderAnimate {
    100% {
        transform: rotate(1turn);
    }
}
@layer utilities {
    .dir-ltr {
        direction: ltr !important;
        unicode-bidi: isolate;
    }

    .dir-rtl {
        direction: rtl !important;
        unicode-bidi: isolate;
    }
}

.content-left li {
    position: relative;
    padding-left: 20px;
}
.content-left li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    height: 7px;
    width: 7px;
    border-radius: 50%;
    background-color: var(--primary);
}
.content-right li {
    position: relative;
    padding-right: 20px;
}
.content-right li::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 0;
    height: 7px;
    width: 7px;
    border-radius: 50%;
    background-color: var(--primary);
}