@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
    font-family: 'Inter var';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter-roman.woff2?v=3.18') format('woff2');
    font-named-instance: 'Regular';
}

@font-face {
    font-family: 'Inter var';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter-italic.woff2?v=3.18') format('woff2');
    font-named-instance: 'Italic';
}

html {
	@apply bg-primary-100;
}

body {
	@apply text-gray-500 antialiased text-base leading-6 font-sans;

	font-feature-settings: 'ss01', 'ss03', 'cv11', 'zero';
}

.container {
    @apply min-h-full flex flex-col justify-center py-12 px-8;
}

.head {
    @apply mx-auto w-full max-w-md;
}
.head .logo svg,
.head .logo img {
    @apply mx-auto h-12 w-auto;
}
.head .title {
    @apply mt-6 text-center text-3xl font-extrabold text-primary-700;
}

.body {
    @apply mt-8 mx-auto w-full max-w-md;
}
.body .card {
    @apply bg-white py-8 shadow-xl shadow-primary-600/30 rounded-md px-10 overflow-hidden ring-1 ring-gray-900/5;
}
.body .card form {
    @apply space-y-6;
}

.body .page-head { @apply text-primary-700; }

h1, h2, h3, h4, p {
	@apply mb-4;
}
h1 {
	@apply text-4xl font-extrabold tracking-tight;
}
h2 {
	@apply text-3xl font-bold;
}
h3 {
	@apply text-2xl font-semibold;
}
h4 {
	@apply text-xl font-medium;
}
p {
	@apply text-base leading-6;
}

input[type=text],
input[type=password],
input[type=email],
textarea,
select {
	@apply rounded-md border border-gray-300 ring-1 ring-transparent shadow-sm focus:border-primary-400 focus:ring-primary-400 focus:text-gray-900 focus:outline-none w-full;
}
input[type=checkbox] {
	@apply rounded bg-white checked:bg-primary-600 border-gray-300 focus:ring-primary-400 focus:ring-offset-white checked:hover:bg-primary-600 focus:text-primary-600;
}

kbd {
	@apply block mb-1 text-sm font-semibold font-sans;
}

.controls {
    @apply flex items-center justify-between;
}
.controls > a {
    @apply text-sm text-primary-700 hover:text-primary-600 font-medium;
}

.checkbox {
    @apply flex items-center space-x-2;
}

label {
    @apply leading-none;
}
label > strong {
    @apply font-medium text-sm;
}

.button-main {
    @apply block w-full py-1.5 px-6 bg-primary-600 text-white font-semibold border-2 border-transparent rounded-md transition hover:bg-white hover:text-primary-600 hover:border-primary-600;
}

.button-sec {
    @apply block w-full py-0.5 px-6 bg-transparent text-gray-500 font-medium text-sm transition hover:text-gray-700 text-center;
}

.flash_message {
	@apply -mx-10 -mt-8 mb-6 font-semibold border-b;
}
.flash_message p {
	@apply m-0 px-6 py-3;
}
.flash-success {
	@apply bg-success-100 border-success-200 text-success-600;
}
.flash-error {
	@apply bg-danger-100 border-danger-200 text-danger-600;
}
.flash-info {
	@apply bg-info-100 border-info-200 text-info-600;
}