@import 'tailwindcss';

@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }

    :root {
        --color-primary-1: #f4fbf7;
        --color-primary-2: #e6f7ee;
        --color-primary-3: #d2f0e0;
        --color-primary-4: #ade3c7;
        --color-primary-5: #7ed0aa;
        --color-primary-6: #46b889;
        --color-primary-7: #229c6f;
        --color-primary-8: #008a4b;
        --color-primary-9: #007840;
        --color-primary-10: #015630;
        --color-primary-11: #014024;
        --color-primary-12: #012d20;

        /* 1 - App background, 2 - Subtle background */
        --color-neutral-1: oklch(99.13% 0.0013 286.38); /* #fcfcfd */
        --color-neutral-2: oklch(98.27% 0.0026 286.35); /* #f9f9fb */

        /* 3 - UI element background, 4 - Hovered UI element background, 5 - Active / Selected UI element background */
        --color-neutral-3: oklch(96.2% 0.004 286.32); /* #f2f2f5 */
        --color-neutral-4: oklch(94.12% 0.0053 286.3); /* #ebebef */
        --color-neutral-5: oklch(92.03% 0.0067 286.27); /* #e4e4e9 */

        /* 6 - Subtle borders and separators, 7 - UI element border and focus rings, 8 - Hovered UI element border */
        --color-neutral-6: oklch(89.93% 0.0081 286.24); /* #dddde3 */
        --color-neutral-7: oklch(87.12% 0.0096 279.67); /* #d3d4db */
        --color-neutral-8: oklch(79.38% 0.0156 277.79); /* #b9bbc6 */

        /* 9 - Solid backgrounds, 10 - Hovered solid backgrounds */
        --color-neutral-9: oklch(64.53% 0.0165 277.7); /* #8b8d98 */
        --color-neutral-10: oklch(60.15% 0.0153 276.9); /* #7e808a */

        /* 11 - Low-contrast text, 12 - High-contrast text */
        --color-neutral-11: oklch(50.25% 0.0136 264.44); /* #60646c */
        --color-neutral-12: oklch(24.11% 0.0097 248.23); /* #1c2024 */

        /* Semantic Colors */
        --color-info: oklch(64.93% 0.1929 251.78); /* #0090ff 9*/
        --color-info-dark: oklch(62.23% 0.1831 251.7); /* #0588f0 10*/
        --color-info-light: oklch(95.97% 0.0201 238.66); /* #e6f4fe 3*/

        --color-success: oklch(64.06% 0.1329 157.68); /* #30a46c 9*/
        --color-success-dark: oklch(61.15% 0.1266 158.23); /* #2b9a66 10*/
        --color-success-light: oklch(95.82% 0.0223 155.92); /* #e6f6eb 3*/

        --color-warning: oklch(
            56.91% 0.11915678603564026 76.80992661960202
        ); /* #9e6c00 11*/
        --color-warning-dark: oklch(35.78% 0.0461 86.88); /* #473b1f 12*/
        --color-warning-light: oklch(97.35% 0.0838 104.2); /* #fffab8 3*/

        --color-error: oklch(62.56% 0.1933 23.03); /* #e5484d 9*/
        --color-error-dark: oklch(59.9% 0.1947 24.04); /* #dc3e42 10*/
        --color-error-light: oklch(95.55% 0.0207 13.86); /* #feebec 3*/
    }

    .dark-theme {
        --color-primary-1: #001a11;
        --color-primary-2: #002619;
        --color-primary-3: #012d20;
        --color-primary-4: #014024;
        --color-primary-5: #015630;
        --color-primary-6: #007840;
        --color-primary-7: #008a4b;
        --color-primary-8: #229c6f;
        --color-primary-9: #46b889;
        --color-primary-10: #7ed0aa;
        --color-primary-11: #ade3c7;
        --color-primary-12: #d2f0e0;

        /* 1 - App background, 2 - Subtle background */
        --color-neutral-1: oklch(17.85% 0.0041 285.98); /* #111113 */
        --color-neutral-2: oklch(21.32% 0.0042 264.48); /* #18191b */

        /* 3 - UI element background, 4 - Hovered UI element background, 5 - Active / Selected UI element background */
        --color-neutral-3: oklch(25.21% 0.0058 271.18); /* #212225 */
        --color-neutral-4: oklch(28.32% 0.007 248.07); /* #272a2d */
        --color-neutral-5: oklch(31.18% 0.0083 255.56); /* #2e3135 */

        /* 6 - Subtle borders and separators, 7 - UI element border and focus rings, 8 - Hovered UI element border */
        --color-neutral-6: oklch(34.66% 0.0103 253.97); /* #363a3f */
        --color-neutral-7: oklch(39.93% 0.0121 252.94); /* #43484e */
        --color-neutral-8: oklch(48.93% 0.0155 251.69); /* #5a6169 */

        /* 9 - Solid backgrounds, 10 - Hovered solid backgrounds */
        --color-neutral-9: oklch(53.7% 0.0153 262.34); /* #696e77 */
        --color-neutral-10: oklch(58.25% 0.0145 266.63); /* #777b84 */

        /* 11 - Low-contrast text, 12 - High-contrast text */
        --color-neutral-11: oklch(76.86% 0.0096 258.34); /* #b0b4ba */
        --color-neutral-12: oklch(94.89% 0.0029 264.54); /* #edeef0 */

        /* Semantic Colors */
        --color-info: oklch(64.93% 0.1929 251.78); /* #0090ff 9*/
        --color-info-dark: oklch(68.84% 0.1693 251.4); /* #3b9eff 10*/
        --color-info-light: oklch(27.45% 0.0663 253.93); /* #0d2847 3*/

        --color-success: oklch(64.06% 0.1329 157.68); /* #30a46c 9*/
        --color-success-dark: oklch(67.46% 0.1406 157.7); /* #33b074 10*/
        --color-success-light: oklch(27.21% 0.0396 162.17); /* #132d21 3*/

        --color-warning: oklch(91.76% 0.1837 100.94); /* #ffe629 9*/
        --color-warning-dark: oklch(
            97.11% 0.18192669459778463 109.35780023059678
        ); /* #ffff57 10*/
        --color-warning-light: oklch(26.09% 0.0472 90.26); /* #2d2305 3*/

        --color-error: oklch(62.56% 0.1933 23.03); /* #e5484d 9*/
        --color-error-dark: oklch(66.34% 0.1774 22.85); /* #ec5d5e 10*/
        --color-error-light: oklch(25.1% 0.0649 12.69); /* #3b1219 3*/
    }

    html {
        @apply bg-skin-neutral-1 text-skin-neutral-12;
    }
}

@utility input-error {
    @apply ring-skin-error!;
}

@theme {
    --color-skin-primary-1: var(--color-primary-1);
    --color-skin-primary-2: var(--color-primary-2);
    --color-skin-primary-3: var(--color-primary-3);
    --color-skin-primary-4: var(--color-primary-4);
    --color-skin-primary-5: var(--color-primary-5);
    --color-skin-primary-6: var(--color-primary-6);
    --color-skin-primary-7: var(--color-primary-7);
    --color-skin-primary-8: var(--color-primary-8);
    --color-skin-primary-9: var(--color-primary-9);
    --color-skin-primary-10: var(--color-primary-10);
    --color-skin-primary-11: var(--color-primary-11);
    --color-skin-primary-12: var(--color-primary-12);

    /* 1 - App background, 2 - Subtle background */
    --color-skin-neutral-1: var(--color-neutral-1);
    --color-skin-neutral-2: var(--color-neutral-2);

    /* 3 - UI element background, 4 - Hovered UI element background, 5 - Active / Selected UI element background */
    --color-skin-neutral-3: var(--color-neutral-3);
    --color-skin-neutral-4: var(--color-neutral-4);
    --color-skin-neutral-5: var(--color-neutral-5);

    /* 6 - Subtle borders and separators, 7 - UI element border and focus rings, 8 - Hovered UI element border */
    --color-skin-neutral-6: var(--color-neutral-6);
    --color-skin-neutral-7: var(--color-neutral-7);
    --color-skin-neutral-8: var(--color-neutral-8);

    /* 9 - Solid backgrounds, 10 - Hovered solid backgrounds */
    --color-skin-neutral-9: var(--color-neutral-9);
    --color-skin-neutral-10: var(--color-neutral-10);

    /* 11 - Low-contrast text, 12 - High-contrast text */
    --color-skin-neutral-11: var(--color-neutral-11);
    --color-skin-neutral-12: var(--color-neutral-12);

    /* Semantic Colors */
    --color-skin-info: var(--color-info);
    --color-skin-info-dark: var(--color-info-dark);
    --color-skin-info-light: var(--color-info-light);

    --color-skin-success: var(--color-success);
    --color-skin-success-dark: var(--color-success-dark);
    --color-skin-success-light: var(--color-success-light);

    --color-skin-warning: var(--color-warning);
    --color-skin-warning-dark: var(--color-warning-dark);
    --color-skin-warning-light: var(--color-warning-light);

    --color-skin-error: var(--color-error);
    --color-skin-error-dark: var(--color-error-dark);
    --color-skin-error-light: var(--color-error-light);

    /* Font Family */
    --font-skin-sans:
        Nunito, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

#nprogress .bar {
    height: 0.3125em !important;
}

@font-face {
    font-family: 'SolaimanLipi';
    src: url('/fonts/SolaimanLipi.ttf') format('truetype');
    font-display: swap;
}
html[lang='bn'] body {
    font-family: 'SolaimanLipi', sans-serif;
}

html[lang='bn'] {
    --font-sans: 'SolaimanLipi', sans-serif;
    --font-skin-sans: 'SolaimanLipi', sans-serif;
}