:root {
    --model-color-claude: #8A5A44;
    --model-color-claude-bg: rgba(138, 90, 68, 0.14);
    --model-color-claude-border: rgba(138, 90, 68, 0.35);

    --model-color-gpt: #0F766E;
    --model-color-gpt-bg: rgba(15, 118, 110, 0.14);
    --model-color-gpt-border: rgba(15, 118, 110, 0.35);

    --model-color-gemini: #2563EB;
    --model-color-gemini-bg: rgba(37, 99, 235, 0.14);
    --model-color-gemini-border: rgba(37, 99, 235, 0.35);

    --model-color-local: #6D28D9;
    --model-color-local-bg: rgba(109, 40, 217, 0.14);
    --model-color-local-border: rgba(109, 40, 217, 0.35);

    --model-color-unknown: #64748B;
    --model-color-unknown-bg: rgba(100, 116, 139, 0.14);
    --model-color-unknown-border: rgba(100, 116, 139, 0.35);

    --model-tier-opus: #9333EA;
    --model-tier-sonnet: #076B62;
    --model-tier-haiku: #8B6200;
}

.model-color--claude,
.model-color--anthropic {
    --model-color: var(--model-color-claude);
    --model-bg: var(--model-color-claude-bg);
    --model-border: var(--model-color-claude-border);
}

.model-color--gpt,
.model-color--openai {
    --model-color: var(--model-color-gpt);
    --model-bg: var(--model-color-gpt-bg);
    --model-border: var(--model-color-gpt-border);
}

.model-color--gemini,
.model-color--google {
    --model-color: var(--model-color-gemini);
    --model-bg: var(--model-color-gemini-bg);
    --model-border: var(--model-color-gemini-border);
}

.model-color--local {
    --model-color: var(--model-color-local);
    --model-bg: var(--model-color-local-bg);
    --model-border: var(--model-color-local-border);
}

.model-color--unknown {
    --model-color: var(--model-color-unknown);
    --model-bg: var(--model-color-unknown-bg);
    --model-border: var(--model-color-unknown-border);
}

/*
 * Dark mode: not yet implemented.
 * These tokens are designed for light backgrounds (#FFFFFF / #F8FAFC).
 * Dark mode overrides should be handled in a dedicated ticket.
 */