<section class="section docs-section" id="colors">
                  <h2 class="section-title">Color Palette</h2>
                  <p class="docs-section-description">Палитра построена вокруг тёмной базы, светлого primary-текста и ярких статусных цветов. Классы bg-* нужны для быстрых цветовых маркеров и демонстрации токенов.</p>
                  <div class="palette">
                    <div class="color"><div class="color-box bg-primary"></div><span>Primary</span></div>
                    <div class="color"><div class="color-box bg-secondary"></div><span>Secondary</span></div>
                    <div class="color"><div class="color-box bg-accent"></div><span>Accent</span></div>
                    <div class="color"><div class="color-box bg-info"></div><span>Info</span></div>
                    <div class="color"><div class="color-box bg-success"></div><span>Success</span></div>
                    <div class="color"><div class="color-box bg-warning"></div><span>Warning</span></div>
                    <div class="color"><div class="color-box bg-error"></div><span>Error</span></div>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Palette HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="color-box bg-primary"&gt;&lt;/div&gt;
&lt;div class="color-box bg-secondary"&gt;&lt;/div&gt;
&lt;div class="color-box bg-success"&gt;&lt;/div&gt;
&lt;div class="color-box bg-warning"&gt;&lt;/div&gt;
&lt;div class="color-box bg-error"&gt;&lt;/div&gt;</code></pre>
	</div>
</section>