@custom-variant dark (&:is(.dark *));

@theme {
    --font-*: initial;
    /*--font-outfit: Outfit, sans-serif;*/
    --font-sans: Outfit, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --breakpoint-*: initial;
    --breakpoint-2xsm: 375px;
    --breakpoint-xsm: 425px;
    --breakpoint-3xl: 2000px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    --text-title-2xl: 72px;
    --text-title-2xl--line-height: 90px;
    --text-title-xl: 60px;
    --text-title-xl--line-height: 72px;
    --text-title-lg: 48px;
    --text-title-lg--line-height: 60px;
    --text-title-md: 36px;
    --text-title-md--line-height: 44px;
    --text-title-sm: 30px;
    --text-title-sm--line-height: 38px;
    --text-theme-xl: 20px;
    --text-theme-xl--line-height: 30px;
    --text-theme-sm: 14px;
    --text-theme-sm--line-height: 20px;
    --text-theme-xs: 12px;
    --text-theme-xs--line-height: 18px;

    --color-current: currentColor;
    --color-transparent: transparent;
    --color-body: #f3f3f9;
    --color-white: #ffffff;
    --color-black: #101828;
    --color-primary: #635bff;
    --color-secondary: #1f2937;

    --color-brand-25: #f2f7ff;
    --color-brand-50: #fefeff;
    --color-brand-100: #e9ecff;
    --color-brand-200: #c0c9ff;
    --color-brand-300: #98a6ff;
    --color-brand-400: #6f82ff;
    --color-brand-500: #465fff;
    --color-brand-600: #0e2eff;
    --color-brand-700: #001dd5;
    --color-brand-800: #001dd5;
    --color-brand-900: #000e65;
    --color-brand-950: #000a49;

    --color-blue-light-25: #f5fbff;
    --color-blue-light-50: #f0f9ff;
    --color-blue-light-100: #e0f2fe;
    --color-blue-light-200: #b9e6fe;
    --color-blue-light-300: #7cd4fd;
    --color-blue-light-400: #36bffa;
    --color-blue-light-500: #0ba5ec;
    --color-blue-light-600: #0086c9;
    --color-blue-light-700: #026aa2;
    --color-blue-light-800: #065986;
    --color-blue-light-900: #0b4a6f;
    --color-blue-light-950: #062c41;

    --color-gray-25: #fcfcfd;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f2f4f7;
    --color-gray-200: #e4e7ec;
    --color-gray-300: #d0d5dd;
    --color-gray-400: #98a2b3;
    --color-gray-500: #667085;
    --color-gray-600: #475467;
    --color-gray-700: #344054;
    --color-gray-800: #1d2939;
    --color-gray-900: #101828;
    --color-gray-950: #0c111d;
    --color-gray-dark: #1a2231;

    --color-orange-25: #fffaf5;
    --color-orange-50: #fff6ed;
    --color-orange-100: #ffead5;
    --color-orange-200: #fddcab;
    --color-orange-300: #feb273;
    --color-orange-400: #fd853a;
    --color-orange-500: #fb6514;
    --color-orange-600: #ec4a0a;
    --color-orange-700: #c4320a;
    --color-orange-800: #9c2a10;
    --color-orange-900: #7e2410;
    --color-orange-950: #511c10;

    --color-success-25: #f6fef9;
    --color-success-50: #ecfdf3;
    --color-success-100: #d1fadf;
    --color-success-200: #a6f4c5;
    --color-success-300: #6ce9a6;
    --color-success-400: #32d583;
    --color-success-500: #12b76a;
    --color-success-600: #039855;
    --color-success-700: #027a48;
    --color-success-800: #05603a;
    --color-success-900: #054f31;
    --color-success-950: #053321;

    --color-error-25: #fffbfa;
    --color-error-50: #fef3f2;
    --color-error-100: #fee4e2;
    --color-error-200: #fecdca;
    --color-error-300: #fda29b;
    --color-error-400: #f97066;
    --color-error-500: #f04438;
    --color-error-600: #d92d20;
    --color-error-700: #b42318;
    --color-error-800: #912018;
    --color-error-900: #7a271a;
    --color-error-950: #55160c;

    --color-warning-25: #fffcf5;
    --color-warning-50: #fffaeb;
    --color-warning-100: #fef0c7;
    --color-warning-200: #fedf89;
    --color-warning-300: #fec84b;
    --color-warning-400: #fdb022;
    --color-warning-500: #f79009;
    --color-warning-600: #dc6803;
    --color-warning-700: #b54708;
    --color-warning-800: #93370d;
    --color-warning-900: #7a2e0e;
    --color-warning-950: #4e1d09;

    --color-theme-pink-500: #ee46bc;

    --color-theme-purple-500: #7a5af8;

    --shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
        0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
        0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    --shadow-theme-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
        0px 1px 2px 0px rgba(16, 24, 40, 0.06);
    --shadow-theme-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --shadow-theme-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
        0px 8px 8px -4px rgba(16, 24, 40, 0.03);
    --shadow-datepicker: -5px 0 0 #262d3c, 5px 0 0 #262d3c;
    --shadow-focus-ring: 0px 0px 0px 4px rgba(70, 95, 255, 0.12);
    --shadow-slider-navigation: 0px 1px 2px 0px rgba(16, 24, 40, 0.1),
        0px 1px 3px 0px rgba(16, 24, 40, 0.1);
    --shadow-tooltip: 0px 4px 6px -2px rgba(16, 24, 40, 0.05),
        -8px 0px 20px 8px rgba(16, 24, 40, 0.05);

    --drop-shadow-4xl: 0 35px 35px rgba(0, 0, 0, 0.25),
        0 45px 65px rgba(0, 0, 0, 0.15);

    --z-index-1: 1;
    --z-index-9: 9;
    --z-index-99: 99;
    --z-index-999: 999;
    --z-index-9999: 9999;
    --z-index-99999: 99999;
    --z-index-999999: 999999;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }

    .dark *,
    .dark ::after,
    .dark ::before,
    .dark ::backdrop,
    .dark ::file-selector-button {
        border-color: var(--color-gray-700, currentColor);
    }
    button:not(:disabled),
    [role="button"]:not(:disabled) {
        cursor: pointer;
    }

    body {
        @apply relative text-base font-normal z-1 bg-gray-50 text-gray-700 dark:text-gray-300;
    }

    /* Prevent FOUC and layout shifts */
    [x-cloak] {
        display: none !important;
    }

    /* Ensure minimum heights to prevent layout shift */
    .main-content {
        min-height: calc(100vh - 4rem);
    }

    /* Optimize image loading */
    img {
        height: auto;
        max-width: 100%;
    }
}
