/*
 * FIELDSETS-COLOR.CSS - Appearance attribute fieldsets
 * Used for Hair, Eyes, Skin, Lips, Top, Bottom in the 6-column grid
 * Uses --fs-accent set inline on each fieldset
 * Part of fieldsets split - see 009_FIELDSET_CSS_SPLIT.md
 */

/* ═══════════════════════════════════════════════════════════════════
   COLOR FIELDSET - Strong tint appearance attributes
   --fs-accent is set inline via style attribute on each fieldset
   ═══════════════════════════════════════════════════════════════════ */

.fieldset.fieldset--color {
    --accent: var(--fs-accent);
    padding: 0.5rem;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--fs-accent) 25%, var(--card-base)) 0%,
        color-mix(in srgb, var(--fs-accent) 12%, var(--card-base)) 100%
    ) !important;
    border: 2px solid color-mix(in srgb, var(--fs-accent) 25%, rgba(255, 255, 255, 0.08));
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 12px color-mix(in srgb, var(--fs-accent) 10%, transparent),
        inset 0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.fieldset--color:hover {
    border-color: color-mix(in srgb, var(--fs-accent) 35%, rgba(255, 255, 255, 0.1));
    box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.5),
        0 0 18px color-mix(in srgb, var(--fs-accent) 15%, transparent),
        inset 0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.fieldset--color h2 {
    font-size: 0.8rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color: var(--fs-accent);
}

.fieldset--color .field label {
    color: var(--fs-accent);
}

.fieldset--color .field input,
.fieldset--color .field textarea {
    border-left-color: color-mix(in srgb, var(--fs-accent) 60%, transparent);
}

.fieldset--color .field input:hover,
.fieldset--color .field textarea:hover {
    border-left-color: var(--fs-accent);
}