@import "tailwindcss";

@config '../../../../tailwind.config.js';

@layer theme {
    :root {
        --muted: #ffffff;
        --primary: #286cf0;
        --primary-deep: #1f56c0;
        --primary-mild: #4c86f4;
        --primary-subtle: #286cf01a;
        --error: #eb4137;
        --error-subtle: #eb41371a;
        --success: #00a85b;
        --success-subtle: #05eb7624;
        --info: #3380fa;
        --info-subtle: #2a85ff1a;
        --warning: #f59e0b;
        --warning-subtle: #ffd40045;
        --gray-50: #fafafa;
        --gray-100: #f5f5f5;
        --gray-200: #e5e5e5;
        --gray-300: #d5d7da;
        --gray-400: #a4a7ae;
        --gray-500: #717680;
        --gray-600: #535862;
        --gray-700: #404040;
        --gray-800: #262626;
        --gray-900: #171717;
        --gray-950: #0a0a0a;
    }

    .dark {
        --muted: #ffffff;
        --primary: #286cf0;
        --primary-deep: #1f56c0;
        --primary-mild: #4c86f4;
        --primary-subtle: #286cf01a;
        --error: #eb4137;
        --error-subtle: #eb41371a;
        --success: #00a85b;
        --success-subtle: #05eb7624;
        --info: #3380fa;
        --info-subtle: #2a85ff1a;
        --warning: #f59e0b;
        --warning-subtle: #ffd40045;
        --gray-50: #fafafa;
        --gray-100: #f5f5f5;
        --gray-200: #e5e5e5;
        --gray-300: #d5d7da;
        --gray-400: #a4a7ae;
        --gray-500: #717680;
        --gray-600: #535862;
        --gray-700: #404040;
        --gray-800: #262626;
        --gray-900: #171717;
        --gray-950: #0a0a0a;
    }
}


@layer base {

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

    button,
    [role="button"] {
        cursor: pointer;
    }

    body {
        @apply text-gray-500 dark:text-gray-400 text-sm bg-gray-50 dark:bg-gray-950 leading-normal;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    h1,
    .h1 {
        @apply text-4xl font-semibold text-gray-900 dark:text-gray-100;
    }

    h2,
    .h2 {
        @apply text-3xl font-semibold text-gray-900 dark:text-gray-100;
    }

    h3,
    .h3 {
        @apply text-2xl font-semibold text-gray-900 dark:text-gray-100;
    }

    h4,
    .h4 {
        @apply text-xl font-semibold text-gray-900 dark:text-gray-100;
    }

    h5,
    .h5 {
        @apply text-lg font-semibold text-gray-900 dark:text-gray-100;
    }

    h6,
    .h6 {
        @apply text-base font-medium text-gray-900 dark:text-gray-100;
    }

    hr {
        @apply border-gray-200 dark:border-gray-600;
    }
}

@layer components {
    .heading-text {
        @apply text-gray-900 dark:text-gray-100;
    }
}