:root {
    /* Base palette: exactly 5 colors per theme */
    --theme-c1: #0D0221;
    --theme-c2: #241468;
    --theme-c3: #9F0D7F;
    --theme-c4: #EA1179;
    --theme-c5: #F79BD3;

    /* Legacy semantic tokens consumed by UI */
    --bg-color: color-mix(in srgb, var(--theme-c1) 88%, #000000 12%);
    --sub-alt-color: color-mix(in srgb, var(--theme-c2) 22%, var(--bg-color) 78%);
    --main-color: color-mix(in srgb, var(--theme-c3) 82%, #5bb7ff 18%);
    --text-color: color-mix(in srgb, #ffffff 90%, var(--theme-c4) 10%);
    --error-color: color-mix(in srgb, #ff4b57 62%, var(--theme-c5) 38%);

    --caret-color: var(--main-color);
    --sub-color: color-mix(in srgb, var(--text-color) 42%, var(--bg-color) 58%);
    --error-extra-color: color-mix(in srgb, var(--error-color) 74%, var(--bg-color) 26%);
    --trans-color: color-mix(in srgb, var(--main-color) 34%, var(--text-color) 66%);
    --success-color: color-mix(in srgb, #3ddc97 66%, var(--main-color) 34%);
    --gold-color: color-mix(in srgb, #f8c24d 64%, var(--main-color) 36%);
    --btn-text-color: color-mix(in srgb, var(--bg-color) 76%, var(--text-color) 24%);

    --surface-soft: color-mix(in srgb, var(--sub-alt-color) 92%, var(--bg-color) 8%);
    --surface-deep: color-mix(in srgb, var(--sub-alt-color) 80%, var(--bg-color) 20%);
    --text-90: color-mix(in srgb, var(--text-color) 90%, transparent);
    --error-soft-text: color-mix(in srgb, var(--error-color) 62%, var(--text-color) 38%);
    --gold-10: color-mix(in srgb, var(--gold-color) 10%, transparent);

    --bg-12: color-mix(in srgb, var(--bg-color) 12%, transparent);
    --bg-18: color-mix(in srgb, var(--bg-color) 18%, transparent);
    --sub-32: color-mix(in srgb, var(--sub-color) 32%, transparent);
    --sub-35: color-mix(in srgb, var(--sub-color) 35%, transparent);
    --sub-90: color-mix(in srgb, var(--sub-color) 90%, transparent);
}

.text-main { color: var(--main-color); }
.text-sub { color: var(--sub-color); }
.text-base { color: var(--text-color); }
.text-error { color: var(--error-color); }
.text-success { color: var(--success-color); }

.bg-surface { background-color: var(--sub-alt-color); }
.border-main { border-color: var(--main-color); }
.border-sub { border-color: var(--sub-color); }
.border-error { border-color: var(--error-color); }