@layer reset, base, components, utilities;

@layer reset {
    /*
        Josh's Custom CSS Reset slightly Modified
        https://www.joshwcomeau.com/css/custom-css-reset/
    */

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        border: 0 solid;
        line-height: calc(1em + 0.5rem);
        margin: 0;
        padding: 0;
    }

    body {
        -webkit-font-smoothing: antialiased;
    }

    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }

    input,
    button,
    textarea,
    select {
        color: inherit;
        font: inherit;
    }

    input:focus {
        outline: none;
    }

    button {
        cursor: pointer;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        word-break: break-word;
    }

    p {
        text-wrap: pretty;
        hyphens: auto;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    a {
        color: #fff;
    }

    a:hover {
        text-decoration: none;
    }
}

@layer base {
    :root {
        --sidebar-width: 400px;
        --spacing: 0.25rem;

        --color-accent-text: #000;

        /* Accent Color Options */

        /* violet (current default) */
        --accent-violet: #A010FF;
        --accent-violet-hover: #8D00E8;

        /* volcanic heat - orange-red */
        --accent-volcano: #ef4410;
        --accent-volcano-hover: #dc2626;

        /* neon lime */
        --accent-lime: #77fb6b;
        --accent-lime-hover: #5ee04f;

        /* electric sky */
        --accent-sky: #38d3fa;
        --accent-sky-hover: #2bc7ee;

        /* crushed coral - warm pink-orange */
        --accent-coral: #FF6B6B;
        --accent-coral-hover: #E55555;

        /* deep emerald - rich green */
        --accent-emerald: #10B981;
        --accent-emerald-hover: #059669;

        /* golden hour - warm amber */
        --accent-amber: #F59E0B;
        --accent-amber-hover: #D97706;

        /* rose quartz - soft pink-red */
        --accent-rose: #F43F5E;
        --accent-rose-hover: #E11D48;

        /* arctic cyan - crisp blue */
        --accent-cyan: #06B6D4;
        --accent-cyan-hover: #0891B2;

        /* midnight indigo - deep blue-purple */
        --accent-indigo: #6366F1;
        --accent-indigo-hover: #4F46E5;

        /* sunset magenta - vibrant pink-purple */
        --accent-magenta: #EC4899;
        --accent-magenta-hover: #DB2777;

        /* Neutral Base Colors - different gray variations */

        /* zinc - deep gray-blue */
        --neutral-zinc-dark: #171619;
        --neutral-zinc-light: #fbfafd;

        /* charcoal - deep black-gray */
        --neutral-charcoal-dark: #0a0a0a;
        --neutral-charcoal-light: #fefdff;
    }

    :root.dark {
        --color-base: color-mix(in srgb, var(--base-hinting) #040305, var(--accent-hinting) var(--color-accent));
        --color-highlight-low: color-mix(in srgb, var(--base-hinting) rgba(255, 255, 255, 0.05), var(--accent-hinting) var(--color-accent));
        --color-highlight: color-mix(in srgb, var(--base-hinting) rgba(255, 255, 255, 0.10), var(--accent-hinting) var(--color-accent));
        --color-highlight-high: color-mix(in srgb, var(--base-hinting) rgba(255, 255, 255, 0.18), var(--accent-hinting) var(--color-accent));
        --color-text: color-mix(in srgb, var(--base-hinting) #fafafa, var(--accent-hinting) var(--color-accent));
        --color-subtle: color-mix(in srgb, var(--base-hinting) #a1a1aa, var(--accent-hinting) var(--color-accent));
        --color-input: color-mix(in srgb, var(--base-hinting) #222124, var(--accent-hinting) var(--color-accent));
        --color-neutral: color-mix(in srgb, var(--base-hinting) var(--neutral-dark), var(--accent-hinting) var(--color-accent));
    }

    :root.light {
        --color-base: color-mix(in srgb, var(--base-hinting) #f2f0f0, var(--accent-hinting) var(--color-accent));
        --color-highlight-low: color-mix(in srgb, var(--base-hinting) rgba(0, 0, 0, 0.06), var(--accent-hinting) var(--color-accent));
        --color-highlight: color-mix(in srgb, var(--base-hinting) rgba(0, 0, 0, 0.08), var(--accent-hinting) var(--color-accent));
        --color-highlight-high: color-mix(in srgb, var(--base-hinting) rgba(0, 0, 0, 0.12), var(--accent-hinting) var(--color-accent));
        --color-text: color-mix(in srgb, var(--base-hinting) #1a1a1a, var(--accent-hinting) var(--color-accent));
        --color-subtle: color-mix(in srgb, var(--base-hinting) #6b7280, var(--accent-hinting) var(--color-accent));
        --color-input: color-mix(in srgb, var(--base-hinting) #ffffff, var(--accent-hinting) var(--color-accent));
        --color-neutral: color-mix(in srgb, var(--base-hinting) var(--neutral-light), var(--accent-hinting) var(--color-accent));
    }

    html,
    body {
        padding: 0;
        margin: 0;
        font-family: system-ui, sans-serif;
        background-color: var(--color-base);
        color: var(--color-text);
    }

    html {
        height: 100vh;
        overflow: hidden;
    }

    body {
        padding: 0.5rem;
        height: 100%;
    }

    button {
        color: inherit;
        display: flex;
    }

    button.accent {
        display: flex;
        justify-content: center;
        cursor: pointer;
        background-color: var(--color-accent);
        color: var(--color-accent-text);
        border-radius: calc(var(--spacing) * 1.5);
        padding-inline: calc(var(--spacing) * 2);
        padding-block: calc(var(--spacing) * 1);
        transition: background-color 150ms cubic-bezier(0.45, 0, 0.55, 1);
    }

    button.accent:hover {
        background-color: var(--color-accent-hover);
    }
}

@layer utilities {
    .object-cover {
        object-fit: cover;
    }

    .backdrop-blur-md {
        backdrop-filter: blur(12px);
    }
}

@layer components {
    .cursor {
        display: inline-block;
        width: 1rem;
        height: 0.9em;
        background-color: currentColor;
        animation: blink 1s step-end infinite;
        vertical-align: middle;
        margin-left: 0.125rem;
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }
}