:root {
    color-scheme: light dark;

    --color-gray-50: oklch(0.985 0.002 247.839);
    --color-gray-100: oklch(0.967 0.003 264.542);
    --color-gray-200: oklch(0.928 0.006 264.531);
    --color-gray-300: oklch(0.872 0.01 258.338);
    --color-gray-400: oklch(0.707 0.022 261.325);
    --color-gray-500: oklch(0.551 0.027 264.364);
    --color-gray-600: oklch(0.446 0.03 256.802);
    --color-gray-700: oklch(0.373 0.034 259.733);
    --color-gray-800: oklch(0.278 0.033 256.848);
    --color-gray-900: oklch(0.21 0.034 264.665);
    --color-gray-950: oklch(0.13 0.028 261.692);


    --primary: oklch(69.577% 0.20423 43.479);
    --primary-foreground: oklch(.985 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(.145 0 0);
    --muted: oklch(.97 0 0);
    --muted-foreground: oklch(.556 0 0);
    --background: oklch(1 0 0);
    --foreground: oklch(.145 0 0);
    --secondary: oklch(.97 0 0);
    --secondary-foreground: oklch(.205 0 0);
    --accent: oklch(.97 0 0);
    --accent-foreground: oklch(.205 0 0);
    --destructive: oklch(.577 .245 27.325);
    --border: oklch(.922 0 0);
    --input: oklch(.922 0 0);
    --ring: oklch(.708 0 0);

    --spacing: 0.25rem;
    --radius: .625rem;


    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --success: oklch(0.577 0.175 142.478);
}

@media (prefers-color-scheme: dark) {
    :root {
        --card: oklch(0.15 0 0);
        --card-foreground: oklch(0.985 0 0);
        --muted: oklch(0.2 0 0);
        --muted-foreground: oklch(0.7 0 0);
        --background: oklch(0.13 0.028 261.692);
        --foreground: oklch(0.985 0 0);
        --secondary: oklch(0.2 0 0);
        --secondary-foreground: oklch(0.985 0 0);
        --accent: oklch(0.2 0 0);
        --accent-foreground: oklch(0.985 0 0);
        --border: oklch(0.278 0.033 256.848);
        --input: oklch(0.278 0.033 256.848);
        --ring: oklch(0.446 0.03 256.802);
    }
}

*,
*::before,
*:after {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
}

html,
body {
    box-sizing: border-box;
    height: 100%;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--foreground);
    font-size: var(--text-sm);

    &:visited,
    &:active,
    &:hover {
        color: var(--foreground);
    }

    &:hover {
        text-decoration: underline;
    }
}

body {
    font-size: 16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    color: var(--foreground);
    background-color: var(--background);
    height: 100%;
    margin: 0;
    padding: 0;
}

.h-full {
    height: 100%;
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.container {
    display: grid;
    height: 100%;
}

/*  */
.image-container {
    display: none;
    position: relative;
}

.image {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: calc(var(--spacing) * 6);
}

.form-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.form-content {
    width: 100%;
    max-width: 24rem;
}

.form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
}

/*  */
.heading-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.heading {
    font-weight: 700;
    font-size: 1.25rem;
}

.subheading {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.grid {
    display: grid;
}

.gap-2 {
    gap: calc(var(--spacing) * 2);
}

.gap-3 {
    gap: calc(var(--spacing) * 3);
}

.gap-4 {
    gap: calc(var(--spacing) * 4);
}

.gap-6 {
    gap: calc(var(--spacing) * 6);
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.ml-auto {
    margin-left: auto;
}

.text-center {
    text-align: center;
}

.underline {
    text-decoration: underline;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
}

.logo {
    width: 28px;
    height: 28px;
    border-radius: 100%;
}


label {
    font-size: var(--text-sm);
    color: var(--foreground);
    font-weight: 500;
}

.field-input {
    border: 1px solid var(--input);
    display: flex;
    height: calc(var(--spacing) * 9);
    width: 100%;
    min-width: 0;
    border-radius: calc(var(--radius) - 2px);
    background-color: transparent;
    padding: calc(var(--spacing)) calc(var(--spacing) * 3);
    outline: none;

    &:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 50%;
    }

    &:focus-visible {
        border-color: var(--ring);
        border-width: 2px;
    }

    &::placeholder {
        color: var(--muted-foreground);
    }

    &::selection {
        background-color: var(--primary-foreground);
    }

    &:aria-invalid {
        border-color:
            color-mix(in oklab, var(--destructive) 20%, transparent)
    }
}

.button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all;
    height: calc(var(--spacing) * 9);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    cursor: pointer;
    outline: none;
    outline-style: none;

    &:disabled {
        pointer-events: none;
        opacity: 50%;
    }

    &:focus-visible {
        border-color: var(--ring);
        border-width: 2px;
    }
}

.button-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);

    &:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
    }
}

.divider {
    position: relative;
    text-align: center;
    font-size: var(--text-sm);

    &::after {
        content: '';
        border-color: var(--border);
        position: absolute;
        inset: 0;
        top: 50%;
        z-index: 0;
        display: flex;
        align-items: center;
        border-top: 1px solid var(--border);
    }

    &>span {
        background-color: var(--background);
        color: var(--muted-foreground);
        position: relative;
        z-index: 10;
        padding: 0 8px;
    }
}

#google {
    color: var(--foreground);
}

.message {
    margin-top: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3) 0;
    color: var(--success);
    font-size: var(--text-sm);
}

@media screen and (min-width: 64rem) {
    .container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .image-container {
        display: block;
    }

    .logo-container {
        justify-content: flex-start;
    }
}

@media screen and (min-width: 48rem) {
    .content {
        padding: calc(var(--spacing) * 10);
    }
}

.error {
    background-color: rgb(252 102 102);
    color: var(--primary-foreground);
    padding: 4px 16px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 13px;
}

.h-6 {
    height: 1.5rem;
}

.w-6 {
    width: 1.5rem;
}