@import url('../shared/base.css');

/* ===== DISC-Specific Styles ===== */

/* Dimension Colors */
:root {
    --disc-d: #f43f5e;
    --disc-i: #f59e0b;
    --disc-s: #10b981;
    --disc-c: #3b82f6;
    --disc-d-light: rgba(244, 63, 94, 0.1);
    --disc-i-light: rgba(245, 158, 11, 0.1);
    --disc-s-light: rgba(16, 185, 129, 0.1);
    --disc-c-light: rgba(59, 130, 246, 0.1);
    --disc-d-gradient: linear-gradient(135deg, #f43f5e, #e11d48);
    --disc-i-gradient: linear-gradient(135deg, #f59e0b, #d97706);
    --disc-s-gradient: linear-gradient(135deg, #10b981, #059669);
    --disc-c-gradient: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* Pill letter colors */
.pill-letter.d { background: var(--disc-d-light); color: var(--disc-d); }
.pill-letter.i { background: var(--disc-i-light); color: var(--disc-i); }
.pill-letter.s { background: var(--disc-s-light); color: var(--disc-s); }
.pill-letter.c { background: var(--disc-c-light); color: var(--disc-c); }

/* Dimension tag on question card */
.question-dimension-tag.d { background: var(--disc-d-light); color: var(--disc-d); }
.question-dimension-tag.i { background: var(--disc-i-light); color: var(--disc-i); }
.question-dimension-tag.s { background: var(--disc-s-light); color: var(--disc-s); }
.question-dimension-tag.c { background: var(--disc-c-light); color: var(--disc-c); }

/* Result bar fills */
.dim-bar-fill.d { background: var(--disc-d-gradient); }
.dim-bar-fill.i { background: var(--disc-i-gradient); }
.dim-bar-fill.s { background: var(--disc-s-gradient); }
.dim-bar-fill.c { background: var(--disc-c-gradient); }

/* Dominant card highlight per type */
.dim-result-card.dominant.d { border-color: var(--disc-d); }
.dim-result-card.dominant.i { border-color: var(--disc-i); }
.dim-result-card.dominant.s { border-color: var(--disc-s); }
.dim-result-card.dominant.c { border-color: var(--disc-c); }

/* Result type code color per type */
.result-type-code.d { color: var(--disc-d); }
.result-type-code.i { color: var(--disc-i); }
.result-type-code.s { color: var(--disc-s); }
.result-type-code.c { color: var(--disc-c); }

/* Result badge per type */
.result-badge.d { background: var(--disc-d); }
.result-badge.i { background: var(--disc-i); }
.result-badge.s { background: var(--disc-s); }
.result-badge.c { background: var(--disc-c); }

/* Option selected per dimension */
.option-item.selected-d { border-color: var(--disc-d); background: var(--disc-d-light); box-shadow: inset 0 0 0 1px var(--disc-d); }
.option-item.selected-d .option-radio { border-color: var(--disc-d); background: var(--disc-d); }
.option-item.selected-i { border-color: var(--disc-i); background: var(--disc-i-light); box-shadow: inset 0 0 0 1px var(--disc-i); }
.option-item.selected-i .option-radio { border-color: var(--disc-i); background: var(--disc-i); }
.option-item.selected-s { border-color: var(--disc-s); background: var(--disc-s-light); box-shadow: inset 0 0 0 1px var(--disc-s); }
.option-item.selected-s .option-radio { border-color: var(--disc-s); background: var(--disc-s); }
.option-item.selected-c { border-color: var(--disc-c); background: var(--disc-c-light); box-shadow: inset 0 0 0 1px var(--disc-c); }
.option-item.selected-c .option-radio { border-color: var(--disc-c); background: var(--disc-c); }

/* Dim result percentage colors */
.dim-result-pct.d { color: var(--disc-d); }
.dim-result-pct.i { color: var(--disc-i); }
.dim-result-pct.s { color: var(--disc-s); }
.dim-result-pct.c { color: var(--disc-c); }

/* Type description accent border */
.type-description.d { border-left: 4px solid var(--disc-d); }
.type-description.i { border-left: 4px solid var(--disc-i); }
.type-description.s { border-left: 4px solid var(--disc-s); }
.type-description.c { border-left: 4px solid var(--disc-c); }

/* Trait card title colors */
.trait-card.strengths .trait-title { color: var(--green); }
.trait-card.challenges .trait-title { color: var(--disc-d); }

/* Tips section */
.tips-section {
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 24px;
}
.tips-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tips-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.tips-list li::before {
    content: '>';
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Hero highlight per type */
.hero h1 .highlight {
    background: linear-gradient(135deg, var(--disc-d), var(--disc-i), var(--disc-s), var(--disc-c));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}