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

/* ===== Big Five Dimension Colors ===== */
:root {
    --dim-O: #8b5cf6;
    --dim-C: #3b82f6;
    --dim-E: #f59e0b;
    --dim-A: #10b981;
    --dim-N: #ec4899;
    --dim-O-light: rgba(139, 92, 246, 0.12);
    --dim-C-light: rgba(59, 130, 246, 0.12);
    --dim-E-light: rgba(245, 158, 11, 0.12);
    --dim-A-light: rgba(16, 185, 129, 0.12);
    --dim-N-light: rgba(236, 72, 153, 0.12);
}

/* Pill dimension colors */
.pill-O .pill-letter { background: var(--dim-O-light); color: var(--dim-O); }
.pill-C .pill-letter { background: var(--dim-C-light); color: var(--dim-C); }
.pill-E .pill-letter { background: var(--dim-E-light); color: var(--dim-E); }
.pill-A .pill-letter { background: var(--dim-A-light); color: var(--dim-A); }
.pill-N .pill-letter { background: var(--dim-N-light); color: var(--dim-N); }

/* Question dimension tags */
.dim-tag-O { background: var(--dim-O-light); color: var(--dim-O); }
.dim-tag-C { background: var(--dim-C-light); color: var(--dim-C); }
.dim-tag-E { background: var(--dim-E-light); color: var(--dim-E); }
.dim-tag-A { background: var(--dim-A-light); color: var(--dim-A); }
.dim-tag-N { background: var(--dim-N-light); color: var(--dim-N); }

/* Result bar fills */
.bar-O { background: linear-gradient(90deg, var(--dim-O), #a78bfa); }
.bar-C { background: linear-gradient(90deg, var(--dim-C), #60a5fa); }
.bar-E { background: linear-gradient(90deg, var(--dim-E), #fbbf24); }
.bar-A { background: linear-gradient(90deg, var(--dim-A), #34d399); }
.bar-N { background: linear-gradient(90deg, var(--dim-N), #f472b6); }

/* Result card accent borders */
.dim-card-O { border-left: 4px solid var(--dim-O); }
.dim-card-C { border-left: 4px solid var(--dim-C); }
.dim-card-E { border-left: 4px solid var(--dim-E); }
.dim-card-A { border-left: 4px solid var(--dim-A); }
.dim-card-N { border-left: 4px solid var(--dim-N); }

/* Result percentage colors */
.pct-O { color: var(--dim-O); }
.pct-C { color: var(--dim-C); }
.pct-E { color: var(--dim-E); }
.pct-A { color: var(--dim-A); }
.pct-N { color: var(--dim-N); }

/* Level badges */
.level-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}
.level-high { background: rgba(16, 185, 129, 0.12); color: #059669; }
.level-medium { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.level-low { background: rgba(107, 114, 128, 0.12); color: #6b7280; }

/* Hidden utility */
.hidden { display: none !important; }