colors for layout, semantic colors for meaning.</li>
                        <li>Flexibility: Mix and match as needed (e.g., a gridable-ss with critical status).</li>
                        <li>Theming: Change all --primary-surface-* or --success-* values globally.</li>
                    </ul>
                </section>

                <!-- Why This Separation? -->
                <section>
                    <h2>Why This Separation?</h2>
                    <ol class="ml-sm">
                        <