Design Tokens

All tokens are CSS custom properties defined in :root (dark RPG theme, dark-first).
Values use HSL channels (no hsl() wrapper in the variable) so they can be composed via Tailwind's @theme inline.

---

Semantic Colors

CSS Variable	HSL Value	Purpose
--background	20 15% 8%	Page / app background
--foreground	40 30% 90%	Default text color
--card	20 15% 12%	Card / surface background
--card-foreground	40 30% 90%	Text on cards
--popover	20 15% 10%	Popovers, dropdowns background
--popover-foreground	40 30% 90%	Text in popovers
--primary	38 70% 50%	Golden amber — buttons, highlights
--primary-foreground	20 15% 8%	Text on primary backgrounds
--secondary	20 15% 18%	Subtle surfaces, secondary buttons
--secondary-foreground	40 30% 90%	Text on secondary
--muted	20 10% 20%	Muted backgrounds (tags, chips)
--muted-foreground	40 15% 60%	Placeholder / secondary text
--accent	38 70% 50%	Same as primary (accent highlights)
--accent-foreground	20 15% 8%	Text on accent backgrounds
--destructive	0 84.2% 60.2%	Danger / delete actions
--destructive-foreground	210 40% 98%	Text on destructive backgrounds
--border	20 15% 20%	Default border color
--input	20 15% 15%	Input field background
--ring	38 70% 50%	Focus ring color
--glow	38 70% 50%	RPG glow effect (box-shadow)

---

Border Radius

CSS Variable	Computed Value	Tailwind class
--radius	0.5rem	base
--radius-sm	calc(var(--radius) - 4px)	rounded-sm
--radius-md	calc(var(--radius) - 2px)	rounded-md
--radius-lg	var(--radius)	rounded-lg
--radius-xl	calc(var(--radius) + 4px)	rounded-xl

---

Sidebar Tokens

CSS Variable	Purpose
--sidebar	Sidebar background
--sidebar-foreground	Sidebar text
--sidebar-primary	Sidebar active/primary color
--sidebar-primary-foreground	Text on sidebar primary
--sidebar-accent	Sidebar hover state
--sidebar-accent-foreground	Text on sidebar accent
--sidebar-border	Sidebar separator
--sidebar-ring	Sidebar focus ring

---

Chart Tokens

CSS Variable	HSL Value	Usage
--chart-1	38 70% 50%	Golden amber
--chart-2	142 70% 45%	Nature green
--chart-3	200 70% 50%	Arcane blue
--chart-4	280 60% 55%	Mystic purple
--chart-5	0 70% 55%	Blood red

---

Typography

The library declares two font families without loading them. Opt in via @import "@franksauvag/rpg-commons/fonts":

Font	Usage	CSS
Cinzel	h1–h6, display text	font-family: "Cinzel", serif
Crimson Text	Body copy, body default	font-family: "Crimson Text", serif

---

Overriding Tokens

Override any token in your consuming app's CSS file after the lib import:

@import "@franksauvag/rpg-commons/style";
@import "tailwindcss";

/* Example: shift primary to a cooler blue for a nautical theme */
:root {
  --primary: 210 70% 55%;
  --ring: 210 70% 55%;
  --glow: 210 70% 55%;
}

To add a light mode, add a .light or [data-theme="light"] class override:

.light {
  --background: 40 30% 96%;
  --foreground: 20 15% 12%;
  --card: 40 20% 92%;
  --card-foreground: 20 15% 12%;
  /* ...other tokens */
}

---

Tailwind Utilities

Because tokens are mapped via @theme inline, all standard Tailwind color utilities resolve automatically:

<div class="bg-primary text-primary-foreground">Golden button</div>
<div class="bg-card border border-border">Card surface</div>
<p class="text-muted-foreground">Subtitle text</p>