/**
 * DSL Network Consistent Color System
 *
 * This file defines the semantic color variables used throughout the application.
 * Based on quality scoring spectrum (red to green) and consistent UI semantics.
 *
 * Usage:
 *   .high-quality { background-color: var(--color-excellent); }
 *   .agree-stance { color: var(--color-agree); }
 */

:root {
    /* === QUALITY SPECTRUM COLORS === */
    /* Based on 0-100 scoring system with specific thresholds */

    /* Quality Colors (Hex) */
    --color-excellent: #27ae60;     /* 80-100: Excellent quality (Green) */
    --color-good: #2ecc71;          /* 65-79: Good quality (Light Green) */
    --color-moderate-high: #f39c12; /* 55-64: Moderate-high quality (Orange) */
    --color-moderate-low: #e67e22;  /* 40-54: Moderate-low quality (Dark Orange) */
    --color-poor: #e74c3c;          /* 0-39: Poor quality (Red) */
    --color-unknown: #95a5a6;       /* Unknown/Pending (Gray) */

    /* Quality Colors (RGB for transparency) */
    --color-excellent-rgb: 39, 174, 96;
    --color-good-rgb: 46, 204, 113;
    --color-moderate-high-rgb: 243, 156, 18;
    --color-moderate-low-rgb: 230, 126, 34;
    --color-poor-rgb: 231, 76, 60;
    --color-unknown-rgb: 149, 165, 166;

    /* Quality Thresholds (for JavaScript/calculations) */
    --threshold-excellent: 80;
    --threshold-good: 65;
    --threshold-moderate: 40;
    --threshold-poor: 0;

    /* === SEMANTIC COLORS === */

    /* Stance/Agreement Colors */
    --color-agree: #28a745;         /* Green - agreement, positive */
    --color-disagree: #dc3545;      /* Red - disagreement, negative */
    --color-neutral: #6c757d;       /* Gray - neutral stance */
    --color-stance-unknown: #95a5a6; /* Light gray - unknown stance */

    /* Analysis Type Colors */
    --color-ai-analysis: #007bff;   /* Blue - AI-generated content */
    --color-user-input: #17a2b8;    /* Teal - user-generated content */
    --color-evidence: #6f42c1;      /* Purple - evidence-based */
    --color-fallacy: #fd7e14;       /* Orange - logical fallacies */
    --color-reasoning: #20c997;     /* Mint - reasoning analysis */

    /* Content Type Colors */
    --color-truth-block: #007bff;   /* Blue - truth blocks */
    --color-comment: #6c757d;       /* Gray - comments */
    --color-post: #28a745;          /* Green - posts/articles */
    --color-quote: #17a2b8;         /* Teal - exact quotes */
    --color-paraphrase: #ffc107;    /* Yellow - paraphrases */
    --color-summary: #fd7e14;       /* Orange - summaries */

    /* State Colors */
    --color-active: #28a745;        /* Green - active/enabled */
    --color-inactive: #6c757d;      /* Gray - inactive/disabled */
    --color-pending: #ffc107;       /* Yellow - pending/processing */
    --color-error: #dc3545;         /* Red - error state */
    --color-warning: #fd7e14;       /* Orange - warning state */
    --color-info: #17a2b8;          /* Teal - informational */

    /* === TRANSPARENCY VARIANTS === */

    /* Quality Colors with Transparency */
    --color-excellent-10: rgba(var(--color-excellent-rgb), 0.1);
    --color-excellent-20: rgba(var(--color-excellent-rgb), 0.2);
    --color-excellent-30: rgba(var(--color-excellent-rgb), 0.3);

    --color-good-10: rgba(var(--color-good-rgb), 0.1);
    --color-good-20: rgba(var(--color-good-rgb), 0.2);
    --color-good-30: rgba(var(--color-good-rgb), 0.3);

    --color-moderate-high-10: rgba(var(--color-moderate-high-rgb), 0.1);
    --color-moderate-high-20: rgba(var(--color-moderate-high-rgb), 0.2);
    --color-moderate-high-30: rgba(var(--color-moderate-high-rgb), 0.3);

    --color-moderate-low-10: rgba(var(--color-moderate-low-rgb), 0.1);
    --color-moderate-low-20: rgba(var(--color-moderate-low-rgb), 0.2);
    --color-moderate-low-30: rgba(var(--color-moderate-low-rgb), 0.3);

    --color-poor-10: rgba(var(--color-poor-rgb), 0.1);
    --color-poor-20: rgba(var(--color-poor-rgb), 0.2);
    --color-poor-30: rgba(var(--color-poor-rgb), 0.3);

    /* === UTILITY CLASSES === */
}

/* Quality Score Background Classes */
.bg-quality-excellent { background-color: var(--color-excellent) !important; color: white; }
.bg-quality-good { background-color: var(--color-good) !important; color: white; }
.bg-quality-moderate-high { background-color: var(--color-moderate-high) !important; color: white; }
.bg-quality-moderate-low { background-color: var(--color-moderate-low) !important; color: white; }
.bg-quality-poor { background-color: var(--color-poor) !important; color: white; }
.bg-quality-unknown { background-color: var(--color-unknown) !important; color: white; }

/* Quality Score Text Classes */
.text-quality-excellent { color: var(--color-excellent) !important; }
.text-quality-good { color: var(--color-good) !important; }
.text-quality-moderate-high { color: var(--color-moderate-high) !important; }
.text-quality-moderate-low { color: var(--color-moderate-low) !important; }
.text-quality-poor { color: var(--color-poor) !important; }
.text-quality-unknown { color: var(--color-unknown) !important; }

/* Quality Score Border Classes */
.border-quality-excellent { border-color: var(--color-excellent) !important; }
.border-quality-good { border-color: var(--color-good) !important; }
.border-quality-moderate-high { border-color: var(--color-moderate-high) !important; }
.border-quality-moderate-low { border-color: var(--color-moderate-low) !important; }
.border-quality-poor { border-color: var(--color-poor) !important; }
.border-quality-unknown { border-color: var(--color-unknown) !important; }

/* Stance Classes */
.bg-stance-agree { background-color: var(--color-agree) !important; color: white; }
.bg-stance-disagree { background-color: var(--color-disagree) !important; color: white; }
.bg-stance-neutral { background-color: var(--color-neutral) !important; color: white; }

.text-stance-agree { color: var(--color-agree) !important; }
.text-stance-disagree { color: var(--color-disagree) !important; }
.text-stance-neutral { color: var(--color-neutral) !important; }

/* Content Type Classes */
.bg-content-truth-block { background-color: var(--color-truth-block) !important; color: white; }
.bg-content-comment { background-color: var(--color-comment) !important; color: white; }
.bg-content-post { background-color: var(--color-post) !important; color: white; }
.bg-content-quote { background-color: var(--color-quote) !important; color: white; }
.bg-content-paraphrase { background-color: var(--color-paraphrase) !important; color: white; }
.bg-content-summary { background-color: var(--color-summary) !important; color: white; }

.text-content-truth-block { color: var(--color-truth-block) !important; }
.text-content-comment { color: var(--color-comment) !important; }
.text-content-post { color: var(--color-post) !important; }
.text-content-quote { color: var(--color-quote) !important; }
.text-content-paraphrase { color: var(--color-paraphrase) !important; }
.text-content-summary { color: var(--color-summary) !important; }

/* Analysis Type Classes */
.bg-analysis-ai { background-color: var(--color-ai-analysis) !important; color: white; }
.bg-analysis-user { background-color: var(--color-user-input) !important; color: white; }
.bg-analysis-evidence { background-color: var(--color-evidence) !important; color: white; }
.bg-analysis-fallacy { background-color: var(--color-fallacy) !important; color: white; }
.bg-analysis-reasoning { background-color: var(--color-reasoning) !important; color: white; }

.text-analysis-ai { color: var(--color-ai-analysis) !important; }
.text-analysis-user { color: var(--color-user-input) !important; }
.text-analysis-evidence { color: var(--color-evidence) !important; }
.text-analysis-fallacy { color: var(--color-fallacy) !important; }
.text-analysis-reasoning { color: var(--color-reasoning) !important; }

/* State Classes */
.bg-state-active { background-color: var(--color-active) !important; color: white; }
.bg-state-inactive { background-color: var(--color-inactive) !important; color: white; }
.bg-state-pending { background-color: var(--color-pending) !important; color: white; }
.bg-state-error { background-color: var(--color-error) !important; color: white; }
.bg-state-warning { background-color: var(--color-warning) !important; color: white; }
.bg-state-info { color: var(--color-info) !important; color: white; }

.text-state-active { color: var(--color-active) !important; }
.text-state-inactive { color: var(--color-inactive) !important; }
.text-state-pending { color: var(--color-pending) !important; }
.text-state-error { color: var(--color-error) !important; }
.text-state-warning { color: var(--color-warning) !important; }
.text-state-info { color: var(--color-info) !important; }

/* === QUALITY SCORE UTILITIES === */

/* Dynamic quality classes (can be applied via JavaScript) */
.quality-score-indicator {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    color: white;
}

/* Progress bars with quality colors */
.progress-bar-quality-excellent { background-color: var(--color-excellent) !important; }
.progress-bar-quality-good { background-color: var(--color-good) !important; }
.progress-bar-quality-moderate-high { background-color: var(--color-moderate-high) !important; }
.progress-bar-quality-moderate-low { background-color: var(--color-moderate-low) !important; }
.progress-bar-quality-poor { background-color: var(--color-poor) !important; }
.progress-bar-quality-unknown { background-color: var(--color-unknown) !important; }

/* Badges with transparency for overlays */
.badge-quality-transparent {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    backdrop-filter: blur(4px);
}

.badge-quality-transparent.excellent { background-color: var(--color-excellent-30); border: 1px solid var(--color-excellent); }
.badge-quality-transparent.good { background-color: var(--color-good-30); border: 1px solid var(--color-good); }
.badge-quality-transparent.moderate-high { background-color: var(--color-moderate-high-30); border: 1px solid var(--color-moderate-high); }
.badge-quality-transparent.moderate-low { background-color: var(--color-moderate-low-30); border: 1px solid var(--color-moderate-low); }
.badge-quality-transparent.poor { background-color: var(--color-poor-30); border: 1px solid var(--color-poor); }