<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>