/* ============================================
   GraphQL Resolution Visualizer - Theme Colors
   Project-specific colors and overrides
   ============================================ */

:root {
    /* GraphQL Component Colors - Earthy mauve/rose palette */
    --color-query: #9E7B8B;           /* Muted mauve/rose */
    --color-query-dark: #7E5B6B;
    --color-parser: #8B7B8E;          /* Dusty purple */
    --color-parser-dark: #6B5B6E;
    --color-validator: #7B8E9E;       /* Muted blue-gray */
    --color-validator-dark: #5B6E7E;
    --color-resolver: #A07080;        /* Dusty berry */
    --color-resolver-dark: #805060;
    --color-dataloader: #7B9E7B;      /* Muted green (optimization) */
    --color-dataloader-dark: #5C7A5C;
    --color-database: #34495E;        /* Dark blue-gray */
    --color-database-dark: #2C3E50;
    --color-response: #D4A855;        /* Warm gold (matches project accent) */
    --color-response-dark: #B8922E;
    --color-ast: #8B7B8E;             /* Muted purple for AST nodes */
    --color-ast-dark: #6B5B6E;

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

/* Link colors using GraphQL theme */
a {
    color: var(--color-query);
}

a:hover {
    color: var(--color-query-dark);
}

/* GraphQL Logo Gradient */
.graphql-logo {
    font-size: 1.25rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-query), var(--color-resolver));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* GraphQL-themed control button */
.viz-control-btn-primary {
    background: linear-gradient(135deg, var(--color-query), var(--color-query-dark)) !important;
    color: white !important;
}

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

/* GraphQL-themed slider thumb */
.viz-speed-slider::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--color-query), var(--color-resolver));
}

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

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

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

/* Query box styles */
.query-box {
    fill: url(#queryGradient);
    rx: 8;
}

.query-text {
    fill: white;
    font-family: var(--font-mono);
    font-size: 12px;
}

/* Resolver box styles */
.resolver-box {
    fill: url(#resolverGradient);
    rx: 8;
}

.resolver-label {
    fill: white;
    font-family: var(--font-mono);
    font-size: 11px;
}

/* Database cylinder styles */
.database-body {
    fill: url(#databaseGradient);
}

.database-top {
    fill: var(--color-database);
    stroke: var(--color-database-dark);
    stroke-width: 1;
}

/* Response styles */
.response-box {
    fill: url(#responseGradient);
    rx: 8;
}

/* Data flow request/packet */
.request-packet {
    fill: var(--color-query);
}

.request-packet.response {
    fill: var(--color-response);
}

/* Field highlight */
.field-highlight {
    fill: rgba(229, 53, 171, 0.2);
    stroke: var(--color-query);
    stroke-width: 2;
    rx: 4;
}

/* Resolver execution glow */
.resolver-active {
    filter: drop-shadow(0 0 8px var(--color-resolver));
}

/* DataLoader queue styles */
.dataloader-queue {
    fill: rgba(46, 204, 113, 0.1);
    stroke: var(--color-dataloader);
    stroke-width: 2;
    stroke-dasharray: 5, 3;
    rx: 6;
}

/* Animation helpers */
.fade-in {
    opacity: 0;
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Flow arrow styles */
.flow-arrow {
    stroke: var(--color-query);
    stroke-width: 2;
    fill: none;
}

.flow-arrow.response {
    stroke: var(--color-response);
}

/* Code block in query display */
.code-block {
    fill: rgba(0, 0, 0, 0.3);
    rx: 6;
}

.code-text {
    fill: #FAF6F0;
    font-family: var(--font-mono);
    font-size: 13px;
}

.code-keyword {
    fill: var(--color-query);
}

.code-field {
    fill: #A5D6FF;
}

.code-brace {
    fill: #FAF6F0;
}