/* ── Muscle Map — CSS Layer ────────────────────────────────────────────
   Semantic color tokens per theme for muscle map SVG.
   Light: purple accents. Dark/Violet: yellow accents for contrast.
──────────────────────────────────────────────────────────────────────── */

/* ── Light theme (default) ── */
:root {
    --mm-body-fill:    #E9E2F8;
    --mm-body-outline: #b4a3e6;
    --mm-primary:      #b4a3e6;
    --mm-secondary:    #b4a3e6;
    --mm-label:        #7B6AAE;
    --mm-caption:      #9588BF;
}

/* ── Dark theme ── */
[data-theme="dark"] {
    --mm-body-fill:    rgba(230, 223, 248, 0.22);
    --mm-body-outline: rgba(230, 223, 248, 0.42);
    --mm-primary:      #F5C800;
    --mm-secondary:    #D9A300;
    --mm-label:        #EDE7FF;
    --mm-caption:      #b4a3e6;
}

/* ── Violet theme ── */
[data-theme="violet"] {
    --mm-body-fill:    rgba(245, 240, 255, 0.20);
    --mm-body-outline: rgba(245, 240, 255, 0.40);
    --mm-primary:      #F5C800;
    --mm-secondary:    #E8B61A;
    --mm-label:        #F4EEFF;
    --mm-caption:      #b4a3e6;
}

/* ── Layout ── */
.mm {
    display: inline-block;
    user-select: none;
}

.mm__view {
    width: 200px;
}

.mm__view svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── SVG fills ── */

/* Body parts (outline, neck, forearms, shins) */
.mm .mm-body * {
    fill: var(--mm-body-fill);
    stroke: var(--mm-body-outline);
    stroke-width: 0.5;
}

/* Inactive muscle zones (default) */
.mm .mm-zone * {
    fill: var(--mm-body-fill);
    transition: fill 0.2s;
}

/* Primary muscles — bright, high contrast */
.mm .mm-primary * {
    fill: var(--mm-primary);
}

/* Secondary muscles — visible but softer */
.mm .mm-secondary * {
    fill: var(--mm-secondary);
}

/* Workload heatmap — relative intensity inside the selected period */
.mm .mm-heat-low * {
    fill: color-mix(in srgb, var(--mm-primary) 34%, var(--mm-body-fill));
}

.mm .mm-heat-medium * {
    fill: color-mix(in srgb, var(--mm-primary) 55%, var(--mm-body-fill));
}

.mm .mm-heat-high * {
    fill: color-mix(in srgb, var(--mm-primary) 76%, var(--mm-body-fill));
}

.mm .mm-heat-very-high * {
    fill: var(--mm-primary);
}

/* ── Size variants ── */

/* Small (sidebar, inline) */
.mm--sm .mm__view { width: 160px; }

/* Large (standalone page) */
.mm--lg .mm__view { width: 300px; }

/* Mini (table cells, cards) */
.mm--mini .mm__view { width: 80px; }

/* ── Mobile ── */
@media (max-width: 480px) {
    .mm__view { width: 180px; }
}