@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --fcms-primary: #0070F4;
    --fcms-primary-bg: #0061e610;
    --fcms-secondary: #12b6b2;
}

body {
    @apply w-full min-h-screen bg-surface-50 dark:bg-surface-900 flex flex-col items-center justify-center;
}

a {
    @apply text-primary dark:text-primary
}

@layer utilities {

    .typography-h1 {
        @apply text-5xl font-headers;
    }

    .typography-h2 {
        @apply text-4xl font-headers;
    }

    .typography-h3 {
        @apply text-3xl font-headers font-normal;
    }

    .typography-h4 {
        @apply text-3xl font-headers font-normal;
    }

    .typography-h5 {
        @apply text-2xl font-headers font-normal;
    }

    .typography-h6 {
        @apply text-xl font-headers font-medium;
    }

    .typography-subtitle1 {
        @apply text-lg font-headers font-medium;
    }

    .typography-subtitle2 {
        @apply text-base font-headers font-medium;
    }

    .typography-body1 {
        /*@apply text-base;*/
    }

    .typography-body2 {
        @apply text-sm;
    }

    .typography-caption {
        @apply text-xs;
    }

    .typography-label {
        @apply text-sm font-medium;
    }

    .typography-inherit {
        @apply text-inherit;
    }

    .typography-button {
        @apply text-sm font-medium uppercase;
    }
}
