@import "tailwindcss";

/* Plugins */
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

@source "resources/view/**/*.{blade.php,antlers.html,yaml}";
@source "content/**/*.{yaml}";

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

/* Theme settings */
@theme {
    --font-display: "Exo", var(--font-sans);
    --font-body: "Open Sans", var(--font-sans);

    --color-white: rgb(var(--colors-white));
    --color-black: rgb(var(--colors-black));

    --color-primary-100: rgb(var(--colors-primary-extralight));
    --color-primary-300: rgb(var(--colors-primary-light));
    --color-primary-500: rgb(var(--colors-primary-normal));
    --color-primary-700: rgb(var(--colors-primary-dark));
    --color-primary-900: rgb(var(--colors-primary-extradark));

    --color-secondary-100: rgb(var(--colors-secondary-extralight));
    --color-secondary-300: rgb(var(--colors-secondary-light));
    --color-secondary-500: rgb(var(--colors-secondary-normal));
    --color-secondary-700: rgb(var(--colors-secondary-dark));
    --color-secondary-900: rgb(var(--colors-secondary-extradark));

    --color-tertiary-100: rgb(var(--colors-tertiary-extralight));
    --color-tertiary-300: rgb(var(--colors-tertiary-light));
    --color-tertiary-500: rgb(var(--colors-tertiary-normal));
    --color-tertiary-700: rgb(var(--colors-tertiary-dark));
    --color-tertiary-900: rgb(var(--colors-tertiary-extradark));

    --color-quaternary-100: rgb(var(--colors-quaternary-extralight));
    --color-quaternary-300: rgb(var(--colors-quaternary-light));
    --color-quaternary-500: rgb(var(--colors-quaternary-normal));
    --color-quaternary-700: rgb(var(--colors-quaternary-dark));
    --color-quaternary-900: rgb(var(--colors-quaternary-extradark));

    --container-padding-default: 1rem;
    --container-padding-sm: 2rem;

    --text-xs: 0.75rem;
    --text-xs--line-height: 1;

    --text-sm: 0.875rem;
    --text-sm--line-height: 1.25;

    --text-base: 1rem;
    --text-base--line-height: 1.5rem;

    --text-md: 1.125rem;
    --text-md--line-height: 1.2;

    --text-lg: 1.25rem;
    --text-lg--line-height: 1.2;

    --text-xl: 1.375rem;
    --text-xl--line-height: 1.2;
    --text-xl--font-weight: 600;

    --text-2xl: 1.5rem;
    --text-2xl--line-height: 1.2;
    --text-2xl--font-weight: 600;

    --text-3xl: 1.875rem;
    --text-3xl--line-height: 1.2;
    --text-3xl--font-weight: 600;

    --text-4xl: 2.25rem;
    --text-4xl--line-height: 1.2;
    --text-4xl--font-weight: 600;

    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-5xl--font-weight: 600;

    --text-6xl: 3.5rem;
    --text-6xl--line-height: 1.2;
    --text-6xl--font-weight: 700;

    --text-7xl: 4rem;
    --text-7xl--line-height: 1.1;
    --text-7xl--font-weight: 700;

    --outline-width-3: 3px;

    --gradient-color-stop-33: 33.333333%;
    --gradient-color-stop-66: 66.666667%;
}

/* Container settings */
@utility container {
    margin-inline: auto;
    padding-inline: 1rem;
    max-width: 1536px;

    @media (min-width: theme(--breakpoint-sm)) {
        padding-inline: 2rem;
    }
}

/* Standard prose config */
@utility prose {
    --tw-prose-body: var(--color-primary-900);
    --tw-prose-headings: var(--color-primary-900);
    --tw-prose-lead: var(--color-primary-900);
    --tw-prose-links: var(--color-primary-900);
    --tw-prose-bold: var(--color-primary-900);
    --tw-prose-counters: var(--color-primary-900);
    --tw-prose-bullets: var(--color-primary-900);
    --tw-prose-hr: var(--color-primary-900);
    --tw-prose-quotes: var(--color-primary-900);
    --tw-prose-quote-borders: var(--color-primary-900);
    --tw-prose-captions: var(--color-primary-900);
    --tw-prose-code: var(--color-primary-900);
    --tw-prose-pre-code: var(--color-primary-900);
    --tw-prose-pre-bg: var(--color-primary-900);
    --tw-prose-th-borders: var(--color-primary-900);
    --tw-prose-td-borders: var(--color-primary-900);

    font-family: var(--font-body);
    font-size: var(--text-md);

    h1 {
        font-size: var(--text-4xl);
        font-weight: var(--text-4xl--font-weight);
        line-height: var(--text-4xl--line-height);
    }

    h2 {
        font-size: var(--text-2xl);
        font-weight: var(--text-2xl--font-weight);
        line-height: var(--text-2xl--line-height);
    }

    h3 {
        font-size: var(--text-xl);
        font-weight: var(--text-xl--font-weight);
        line-height: var(--text-xl--line-height);
    }

    h4 {
        font-size: var(--text-lg);
        font-weight: var(--text-lg--font-weight);
        line-height: var(--text-lg--line-height);
    }

    h5 {
        font-size: var(--text-lg);
        font-weight: var(--text-lg--font-weight);
        line-height: var(--text-lg--line-height);
    }

    h6 {
        font-size: var(--text-md);
        font-weight: var(--text-md--font-weight);
        line-height: var(--text-md--line-height);
    }

    ul {
        list-style: none;
        padding-left: 0;
    }

    ul > li {
        position: relative;
        padding-left: 2rem;
    }

    ul > li::before {
        content: "";
        color: var(--color-primary-900);
        position: absolute;
        left: 0;
        top: 0.2em;
        width: 1.5rem;
        height: 1.5rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='1.25' fill='currentColor'/%3E%3C/svg%3E");
        background-size: 1.5rem 1.5rem;
        background-repeat: no-repeat;
    }
}

/* Prose lg config */
@utility prose-lg {
    font-size: var(--text-md);

    h1 {
        font-size: var(--text-6xl);
        font-weight: var(--text-6xl--font-weight);
        line-height: var(--text-6xl--line-height);
    }

    h2 {
        font-size: var(--text-5xl);
        font-weight: var(--text-5xl--font-weight);
        line-height: var(--text-5xl--line-height);
    }

    h3 {
        font-size: var(--text-4xl);
        font-weight: var(--text-4xl--font-weight);
        line-height: var(--text-4xl--line-height);
    }

    h4 {
        font-size: var(--text-3xl);
        font-weight: var(--text-3xl--font-weight);
        line-height: var(--text-3xl--line-height);
    }

    h5 {
        font-size: var(--text-2xl);
        font-weight: var(--text-2xl--font-weight);
        line-height: var(--text-2xl--line-height);
    }

    h6 {
        font-size: var(--text-xl);
        font-weight: var(--text-xl--font-weight);
        line-height: var(--text-xl--line-height);
    }

    ul {
        padding-left: 0;
    }

    ul > li {
        padding-left: 2rem;
    }

    ul > li > p {
        margin-top: 0rem;
        margin-bottom: 0rem;
    }
}

/* Prose white config */
@utility prose-white {
    --tw-prose-body: var(--color-white);
    --tw-prose-headings: var(--color-white);
    --tw-prose-lead: var(--color-white);
    --tw-prose-links: var(--color-white);
    --tw-prose-bold: var(--color-white);
    --tw-prose-counters: var(--color-white);
    --tw-prose-bullets: var(--color-white);
    --tw-prose-hr: var(--color-white);
    --tw-prose-quotes: var(--color-white);
    --tw-prose-quote-borders: var(--color-white);
    --tw-prose-captions: var(--color-white);
    --tw-prose-code: var(--color-white);
    --tw-prose-pre-code: var(--color-white);
    --tw-prose-pre-bg: var(--color-white);
    --tw-prose-th-borders: var(--color-white);
    --tw-prose-td-borders: var(--color-white);
}
