<h3>🌞 <strong>Light Theme</strong></h3> Element | Color | Description -- | -- | -- Primary | #2AB7CA | Teal — fresh, clean, and health-oriented Accent | #F4A261 | Warm orange — adds energy and friendliness Background | #FFFFFF | Crisp white — maximizes readability and cleanliness Text (Primary) | #2A2A2A | Deep gray — softer than black, easy on the eyes Secondary Text | #5F6F7A | Muted slate — for labels and helper text Button Hover | #218E9F | Slightly darker teal for interactive feedback <h3 class="text-lg-strong pb-1 [&:not(:first-child)]:pt-3.5">🌙 <strong>Dark Theme</strong></h3> <div class="relative max-w-full"><div class="my-6 max-w-full overflow-x-auto rounded-lg bg-white/25 dark:bg-black/25"><table class="t-table" style="border-spacing: 0px;"><thead><tr><th style="opacity: 1;">Element</th><th style="opacity: 1;">Color</th><th style="opacity: 1;">Description</th></tr></thead><tbody><tr><td style="opacity: 1;">Primary</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#2AB7CA</code></td><td style="opacity: 1;">Same teal — maintains brand consistency</td></tr><tr><td style="opacity: 1;">Accent</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#E76F51</code></td><td style="opacity: 1;">Deep coral — adds warmth and contrast</td></tr><tr><td style="opacity: 1;">Background</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#1E1E1E</code></td><td style="opacity: 1;">Charcoal black — modern and low-glare</td></tr><tr><td style="opacity: 1;">Text (Primary)</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#E0E0E0</code></td><td style="opacity: 1;">Soft light gray — readable without harsh contrast</td></tr><tr><td style="opacity: 1;">Secondary Text</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#A0A0A0</code></td><td style="opacity: 1;">Dim gray — for subtle UI elements</td></tr><tr><td style="opacity: 1;">Button Hover</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#1F9AAE</code></td><td style="opacity: 1;">Brighter teal for hover feedback</td></tr></tbody></table></div><div class="pointer-events-none absolute inset-0 rounded-lg border border-stroke-300 dark:border-stroke-450"></div></div>
