Theme Variables

<style>
  /* Override the DNA hue — every derived color updates automatically */
  :root {
    --vel-dna-hue: 145;  /* 258=violet, 145=forest, 205=ocean, 22=ember */
  }
  /* All tokens are derived:
     --vel-color-primary: oklch(65% 0.21 var(--vel-dna-hue))
     --vel-surface-0:     oklch(7%  0.02 var(--vel-dna-hue))
     --vel-text-1:        oklch(92% 0.015 var(--vel-dna-hue)) */
</style>

<!-- Or do it in JavaScript — the complete theming logic: -->
<div style="font-family:monospace;font-size:0.8rem;color:#94a3b8;padding:8px;background:#0d1422;border-radius:6px">
  document.documentElement.style.setProperty('--vel-dna-hue', '145');
</div>

<!-- Each section gets its own color universe — inherits from parent -->
<section data-vel-theme="ocean" style="padding:1rem;border-radius:0.5rem;border:1px solid #1e2d45">
  <p style="color:#64748b;font-size:0.8rem;margin-bottom:0.5rem">data-vel-theme="ocean" (hue 205)</p>
  <button class="vel-btn vel-btn-primary">Ocean Button</button>
</section>

<!-- data-vel-theme values: ocean | forest | ember | aurora | gold -->

<style>
  :root {
    --vel-primary-500: #e11d48;  /* your brand color */
    --vel-radius-lg:   0.75rem;  /* rounder corners */
    --vel-font-sans:   'Inter', system-ui, sans-serif;
  }
</style>

<!-- All vel-btn-primary, vel-text-primary, vel-bg-primary update automatically -->
<button class="vel-btn vel-btn-primary">Branded Button</button>

<style>
  .my-card {
    background: var(--vel-surface-2);
    border: 1px solid var(--vel-border-base);
    border-radius: var(--vel-radius-lg);
    padding: var(--vel-space-4);
    color: var(--vel-color-text);
  }
</style>

<div class="my-card">
  Custom component using VeloraCSS tokens
</div>