/* ============================================
   RAG Flow Visualizer - Theme Colors
   Project-specific colors and overrides
   ============================================ */

:root {
    /* RAG Component Colors - Natural Earth Tones */
    --color-query-start: #B87A5C;
    --color-query-end: #9C6248;
    --color-embedder-start: #8B7B9E;
    --color-embedder-end: #6B5B7E;
    --color-vectordb-start: #7B9E8B;
    --color-vectordb-end: #5C7A6B;
    --color-document: #C4B392;
    --color-document-end: #A89A78;
    --color-llm-start: #6B8E9E;
    --color-llm-end: #4A6E7E;
    --color-response: #D4A855;
    --color-response-end: #B89040;
    --color-context: #C98B7B;
    --color-context-end: #A86B5B;
    --color-vector: #9B8EA8;
    --color-vector-glow: rgba(155, 142, 168, 0.45);

    /* Theme accent for controls */
    --color-accent-start: var(--color-embedder-start);
    --color-accent-end: var(--color-vectordb-start);
}

/* Link colors using RAG theme */
a {
    color: var(--color-vectordb-start);
}

a:hover {
    color: var(--color-vectordb-end);
}

/* RAG Logo Gradient */
.viz-logo {
    font-size: 1.25rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-embedder-start), var(--color-vectordb-start)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* RAG-themed control button */
.viz-control-btn-primary {
    background: linear-gradient(135deg, var(--color-embedder-end), var(--color-vectordb-end)) !important;
    color: white !important;
}

.viz-control-btn-primary:hover {
    filter: brightness(1.1);
}

/* RAG-themed slider thumb */
.viz-speed-slider::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--color-embedder-start), var(--color-vectordb-start));
}

.viz-speed-slider::-moz-range-thumb {
    background: linear-gradient(135deg, var(--color-embedder-start), var(--color-vectordb-start));
}

/* RAG lesson item active state */
.viz-lesson-item.active {
    background-color: var(--bg-surface-light) !important;
    border-left-color: var(--color-embedder-start) !important;
}

.viz-lesson-item.active .lesson-number {
    background: linear-gradient(135deg, var(--color-embedder-start), var(--color-embedder-end));
    color: white;
}

/* Entity badges for info panel */
.badge-query {
    background-color: rgba(184, 122, 92, 0.2);
    color: var(--color-query-start);
}

.badge-embedder {
    background-color: rgba(139, 123, 158, 0.2);
    color: var(--color-embedder-start);
}

.badge-vectordb {
    background-color: rgba(123, 158, 139, 0.2);
    color: var(--color-vectordb-start);
}

.badge-document {
    background-color: rgba(196, 179, 146, 0.2);
    color: var(--color-document);
}

.badge-chunk {
    background-color: rgba(196, 179, 146, 0.2);
    color: var(--color-document);
}

.badge-llm {
    background-color: rgba(107, 142, 158, 0.2);
    color: var(--color-llm-start);
}

.badge-response {
    background-color: rgba(212, 168, 85, 0.2);
    color: var(--color-response);
}

.badge-vector {
    background-color: rgba(155, 142, 168, 0.2);
    color: var(--color-vector);
}

.badge-prompttemplate {
    background-color: rgba(201, 139, 123, 0.2);
    color: var(--color-context);
}