/* ── Default ── */
:root,
[data-theme="default"] {
    --bg-main: #000000;
    --bg-invert: #FFFFFF;
    --bg-modal: #212121;
    --bg-select: #323232;

    --c-main: #FFFFFF;
    --c-invert: #000000;
    --c-muted: #A4A4A4;
    --c-heading: #FFDDC0;
    --c-link: #C3C7F4;
    --c-link-invert: #0D0F21;
    --c-error: #FF6B6B;

    --color-main: #FFFFFF;
}

/* ── Tokyo Night ── */
[data-theme="tokyonight"] {
    --bg-main: #1a1b26;
    --bg-invert: #c0caf5;
    --bg-modal: #24283b;
    --bg-select: #292e42;

    --c-main: #c0caf5;
    --c-invert: #1a1b26;
    --c-muted: #565f89;
    --c-heading: #7aa2f7;
    --c-link: #bb9af7;
    --c-link-invert: #1a1b26;
    --c-error: #f7768e;

    --color-main: #7aa2f7;
}

/* ── Gruvbox ── */
[data-theme="gruvbox"] {
    --bg-main: #282828;
    --bg-invert: #fbf1c7;
    --bg-modal: #3c3836;
    --bg-select: #504945;

    --c-main: #ebdbb2;
    --c-invert: #282828;
    --c-muted: #928374;
    --c-heading: #fabd2f;
    --c-link: #83a598;
    --c-link-invert: #282828;
    --c-error: #fb4934;

    --color-main: #fabd2f;
}

/* ── Backgrounds ── */
.bg-main {
    background-color: var(--bg-main);
}

.bg-invert {
    background-color: var(--bg-invert);
}

.bg-modal {
    background-color: var(--bg-modal);
}

.bg-select {
    background-color: var(--bg-select);
}

/* ── Text ── */
.text-main {
    color: var(--c-main);
    fill: var(--c-main);
}

.text-invert {
    color: var(--c-invert);
}

.text-muted {
    color: var(--c-muted);
}

.text-heading {
    color: var(--c-heading);
    fill: var(--c-heading);
}

.text-link {
    color: var(--c-link);
}

.text-link-invert {
    color: var(--c-link-invert);
}

.text-error {
    color: var(--c-error);
}

.border-error {
    border-color: var(--c-error);
}

.hover\:text-error:hover {
    color: var(--c-error);
}

.color-main {
    background-color: var(--color-main);
}

.border-main {
    --tw-ring-color: var(--color-main);
    border-color: var(--color-main);
    outline-color: var(--color-main);
}