:root {
    --font-sans: system-ui, sans-serif;
    --sidebar-width: 400px;
    --spacing: 0.25rem;

    --color-accent-text: #000;

    --reasoning-accent: #a62bcb;

    /* 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: #29e154;
    --accent-lime-hover: #53e475;

    /* 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.1),
            var(--accent-hinting) var(--color-accent));
    --color-highlight-high: color-mix(in srgb,
            var(--base-hinting) rgba(255, 255, 255, 0.15),
            var(--accent-hinting) var(--color-accent));
    --color-text: color-mix(in srgb, var(--base-hinting) #fafafa, var(--accent-hinting) var(--color-accent));
    --color-muted: color-mix(in srgb, var(--base-hinting) #a1a1a0, var(--accent-hinting) var(--color-accent));
    --color-subtle: color-mix(in srgb, var(--base-hinting) #d1d1d0, 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));
    --color-reasoning: color-mix(in srgb, var(--base-hinting) #66666a, 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.13),
            var(--accent-hinting) var(--color-accent));
    --color-text: color-mix(in srgb, var(--base-hinting) #1a1a1a, var(--accent-hinting) var(--color-accent));
    --color-muted: color-mix(in srgb, var(--base-hinting) #6b7270, var(--accent-hinting) var(--color-accent));
    --color-subtle: color-mix(in srgb, var(--base-hinting) #9ba2a0, 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));
    --color-reasoning: color-mix(in srgb, var(--base-hinting) #99979c, var(--accent-hinting) var(--color-accent));
}

html,
body {
    padding: 0;
    margin: 0;
    background-color: var(--color-base);
    color: var(--color-text);
}

html.dark {
    color-scheme: dark;
}

html.light {
    color-scheme: light;
}

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

body {
    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);
}

.capitalize {
    text-transform: capitalize;
}