@import "tailwindcss";

@theme {
    --text-*: initial;
    --text-10: 0.625rem;
    --text-12: 0.75rem;
    --text-14: 0.875rem;
    --text-16: 1rem;
    --text-18: 1.125rem;
    --text-20: 1.25rem;
    --text-24: 1.5rem;
    --text-28: 1.75rem;

    --color-*: initial;
    --color-current: currentColor;
    --color-transparent: transparent;
    --color-white: #fff;
    --color-black: #000;
    --color-blue: #0070e0;
    --color-indigo: #6610f2;
    --color-purple: #6f42c1;
    --color-pink: #f04861;
    --color-red: #e84031;
    --color-orange: #ff893e;
    --color-yellow: #ffd630;
    --color-green: #17ad41;
    --color-teal: #20c997;
    --color-cyan: #17a2b8;
    --color-sky-blue: #42c6ff;
    --color-primary: rgb(46, 174, 184);
    --color-secondary: rgb(197, 197, 197);
    --color-info: #0070e0;
    --color-warning: #ffd630;
    --color-danger: #e84031;
    --color-success: #17ad41;

    --color-gray-100: #f7f7f7;
    --color-gray-200: #f3f0f0;
    --color-gray-300: #e4e0df;
    --color-gray-400: #d9d2d0;
    --color-gray-500: #a8a0a0;
    --color-gray-600: #847c7c;
    --color-gray-700: #6d6565;
    --color-gray-800: #4a4a4a;
    --color-gray-900: #1c1c1c;

    --color-dataviz-1: #33c2cc;
    --color-dataviz-2: #d95926;
    --color-dataviz-3: #268fd9;
    --color-dataviz-4: #974cb3;
    --color-dataviz-5: #d92674;
    --color-dataviz-6: #4cb350;
    --color-dataviz-7: #e84031;
    --color-dataviz-8: #ffd630;
    --color-dataviz-9: #17ad41;
    --color-dataviz-10: #20c997;
    --color-dataviz-11: #17a2b8;

    --color-midnight-1: rgb(168 168 168);
    --color-midnight-2: rgb(154 154 154);
    --color-midnight-3: rgb(138 138 138);
    --color-midnight-4: rgb(117 117 117);
    --color-midnight-5: rgb(92 92 92);
    --color-midnight-6: rgb(66 66 66);
    --color-midnight-7: rgb(50 50 50);
    --color-midnight-8: rgb(36 36 36);
    --color-midnight-9: rgb(18 18 18);
}

/*
  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);
    }
}

@layer base {
    body {
        @apply bg-black bg-fixed bg-repeat text-14;
    }

    a {
        @apply text-blue hover:underline;
    }

    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        @apply h-10 truncate rounded-sm bg-primary px-4 text-12 font-medium uppercase tracking-wider text-white hover:brightness-90 cursor-pointer;
    }

    button:disabled {
        @apply cursor-not-allowed opacity-65;
    }

    select {
        @apply h-10 rounded-sm border border-gray-300 bg-white p-2.5 text-14 hover:border-gray-500;
    }

    select option {
        font-family: inherit;
    }

    input:not([type="checkbox"]) {
        @apply h-10 rounded-sm border border-gray-300 p-2.5 text-14 placeholder-gray-700 hover:border-gray-500;
    }

    input[data-error]:not([type="checkbox"]) {
        @apply border-red outline-red;
    }

    input[type="date"]::-webkit-datetime-edit-month-field,
    input[type="date"]::-webkit-datetime-edit-day-field,
    input[type="date"]::-webkit-datetime-edit-year-field {
        color: black;
    }

    input[type="date"]::-webkit-datetime-edit {
        color: black;
    }

    input[type="date"]:invalid,
    input[type="date"]:not(:invalid) {
        color: #ddd;
    }

    h4 {
        @apply text-16;
    }

    .content-column {
        @apply z-0 bg-white max-sm:w-full sm:w-[340px];
    }

    .content-card {
        @apply flex flex-col gap-5 rounded-sm border p-5;
    }
}