zhongwei/gh-djankies-claude-configs-tailwind-4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-29 18:22:33 +08:00
commit 735ed8d1d7
19 changed files with 5548 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
skills/using-theme-variables/SKILL.md Normal file
View File

@@ -0,0 +1,289 @@
---
name: using-theme-variables
description: Define and use theme variables with @theme directive, oklch() color format, semantic naming, and namespaced utilities. Use when customizing design tokens or creating design systems.
allowed-tools: Read, Write, Edit, Grep, Glob
---
# Using Theme Variables
## Purpose
Define custom design tokens using the `@theme` directive with CSS variables. Tailwind v4 uses modern color formats (oklch) and namespace-based utility generation.
## Basic Theme Variables
```css
@import 'tailwindcss';
@theme {
--font-display: 'Satoshi', 'sans-serif';
--font-body: 'Inter', 'sans-serif';
--color-brand-primary: oklch(0.65 0.25 270);
--color-brand-accent: oklch(0.75 0.22 320);
--breakpoint-3xl: 120rem;
--breakpoint-4xl: 160rem;
--spacing-18: 4.5rem;
--spacing-72: 18rem;
--radius-4xl: 2rem;
--shadow-brutal: 8px 8px 0 0 rgb(0 0 0);
}
```
## Color Format: oklch()
Tailwind v4 uses OkLCh color space instead of RGB for wider gamut and more vivid colors on modern displays.
**oklch() syntax:**
```
oklch(Lightness Chroma Hue)
```
- **Lightness:** 0 (black) to 1 (white)
- **Chroma:** 0 (gray) to ~0.4 (vivid)
- **Hue:** 0-360 degrees
**Examples:**
```css
@theme {
--color-blue: oklch(0.65 0.25 270);
--color-green: oklch(0.72 0.15 142);
--color-red: oklch(0.65 0.22 25);
--color-purple: oklch(0.75 0.22 320);
--color-orange: oklch(0.78 0.18 60);
}
```
## Theme Variable Namespaces
Tailwind generates utilities based on variable name prefixes:
| Namespace | Utilities Generated |
| ----------------- | ------------------------------------------ |
| `--color-*` | bg-, text-, fill-, stroke-, border-, ring- |
| `--font-*` | font-family utilities |
| `--text-*` | font-size utilities |
| `--font-weight-*` | font-weight utilities |
| `--tracking-*` | letter-spacing utilities |
| `--leading-*` | line-height utilities |
| `--breakpoint-*` | responsive breakpoint variants |
| `--spacing-*` | padding, margin, sizing utilities |
| `--radius-*` | border-radius utilities |
| `--shadow-*` | box-shadow utilities |
| `--animate-*` | animation utilities |
**Example usage:**
```css
@theme {
--color-brand: oklch(0.65 0.25 270);
--spacing-18: 4.5rem;
--radius-4xl: 2rem;
}
```
Generates utilities:
```html
<div class="bg-brand text-brand border-brand"></div>
<div class="p-18 m-18 w-18"></div>
<div class="rounded-4xl"></div>
```
## Semantic Naming
Use meaningful names instead of generic scales:
```css
@theme {
--color-primary: oklch(0.65 0.25 270);
--color-secondary: oklch(0.75 0.22 320);
--color-success: oklch(0.72 0.15 142);
--color-warning: oklch(0.78 0.18 60);
--color-error: oklch(0.65 0.22 25);
--color-text: oklch(0.21 0 0);
--color-text-muted: oklch(0.51 0 0);
--color-background: oklch(0.99 0 0);
}
```
**Usage:**
```html
<button class="bg-primary text-white hover:opacity-90">Primary Button</button>
<div class="text-error">Error message</div>
<p class="text-text-muted">Muted text</p>
```
## Extending Default Theme
Add new values without removing defaults:
```css
@theme {
--color-lagoon: oklch(0.72 0.11 221.19);
--color-coral: oklch(0.74 0.17 40.24);
--font-script: 'Great Vibes', cursive;
--breakpoint-3xl: 120rem;
}
```
All default Tailwind utilities remain available (blue-500, gray-200, etc.).
## Replacing Default Theme
Remove all defaults and define only custom variables:
```css
@theme {
--*: initial;
--spacing: 4px;
--font-body: 'Inter', sans-serif;
--color-lagoon: oklch(0.72 0.11 221.19);
--color-coral: oklch(0.74 0.17 40.24);
}
```
Only utilities based on custom variables will be generated.
## Inline Theme Variables
Reference other variables using the inline option:
```css
@theme inline {
--font-sans: var(--font-inter);
--color-primary: var(--color-red-500);
--spacing-gutter: var(--spacing-4);
}
```
Variables defined in `@theme inline` can reference variables from main `@theme`.
## Static Theme Variables
Generate all CSS variables even if unused:
```css
@theme static {
--color-primary: var(--color-red-500);
--color-secondary: var(--color-blue-500);
}
```
Useful for runtime JavaScript access:
```javascript
const styles = getComputedStyle(document.documentElement);
const primaryColor = styles.getPropertyValue('--color-primary');
```
## Accessing Variables in JavaScript
```javascript
const styles = getComputedStyle(document.documentElement);
const shadow = styles.getPropertyValue('--shadow-xl');
const color = styles.getPropertyValue('--color-blue-500');
```
**Setting variables dynamically:**
```javascript
document.documentElement.style.setProperty('--color-primary', 'oklch(0.70 0.20 180)');
```
**In animation libraries:**
```jsx
<motion.div animate={{ backgroundColor: 'var(--color-blue-500)' }} />
```
## Sharing Themes Across Projects
**Create shared theme file:**
**packages/brand/theme.css:**
```css
@theme {
--*: initial;
--spacing: 4px;
--font-body: 'Inter', sans-serif;
--color-lagoon: oklch(0.72 0.11 221.19);
--color-coral: oklch(0.74 0.17 40.24);
}
```
**Import in projects:**
```css
@import 'tailwindcss';
@import '@my-company/brand/theme.css';
```
## Complex Theme Example
```css
@import 'tailwindcss';
@theme {
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--color-white: #ffffff;
--color-black: #000000;
--color-gray-50: oklch(0.99 0 0);
--color-gray-100: oklch(0.97 0 0);
--color-gray-900: oklch(0.21 0 0);
--color-primary: oklch(0.65 0.25 270);
--color-secondary: oklch(0.75 0.22 320);
--color-success: oklch(0.72 0.15 142);
--spacing: 0.25rem;
--spacing-px: 1px;
--spacing-1: calc(var(--spacing) * 1);
--spacing-4: calc(var(--spacing) * 4);
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-full: 9999px;
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
}
```
## Best Practices
1. **Use semantic names** instead of scales (primary vs blue-500)
2. **Use oklch()** for color definitions
3. **Define variables at :root** for performance
4. **Group related variables** (colors, spacing, typography)
5. **Reference other variables** with inline theme
6. **Share themes** across projects using imports
## See Also
- references/color-conversion.md - Hex to oklch conversion table
- references/namespace-reference.md - Complete namespace documentation

179
skills/using-theme-variables/references/color-conversion.md Normal file
View File

@@ -0,0 +1,179 @@
# Color Conversion: Hex to oklch()
## Common Color Conversions
### Grays
| Hex | oklch() | Description |
| --------- | -------------------- | -------------- |
| `#ffffff` | `oklch(1 0 0)` | White |
| `#f9fafb` | `oklch(0.99 0 0)` | Gray 50 |
| `#f3f4f6` | `oklch(0.97 0 0)` | Gray 100 |
| `#e5e7eb` | `oklch(0.93 0 0)` | Gray 200 |
| `#d1d5db` | `oklch(0.88 0 0)` | Gray 300 |
| `#9ca3af` | `oklch(0.74 0 0)` | Gray 400 |
| `#6b7280` | `oklch(0.62 0 0)` | Gray 500 |
| `#4b5563` | `oklch(0.51 0 0)` | Gray 600 |
| `#374151` | `oklch(0.42 0 0)` | Gray 700 |
| `#1f2937` | `oklch(0.31 0 0)` | Gray 800 |
| `#111827` | `oklch(0.21 0 0)` | Gray 900 |
| `#000000` | `oklch(0 0 0)` | Black |
### Blues
| Hex | oklch() | Description |
| --------- | -------------------- | -------------- |
| `#eff6ff` | `oklch(0.98 0.01 250)` | Blue 50 |
| `#dbeafe` | `oklch(0.95 0.03 250)` | Blue 100 |
| `#bfdbfe` | `oklch(0.90 0.06 250)` | Blue 200 |
| `#93c5fd` | `oklch(0.82 0.10 250)` | Blue 300 |
| `#60a5fa` | `oklch(0.73 0.16 250)` | Blue 400 |
| `#3b82f6` | `oklch(0.65 0.25 270)` | Blue 500 |
| `#2563eb` | `oklch(0.55 0.28 270)` | Blue 600 |
| `#1d4ed8` | `oklch(0.47 0.27 270)` | Blue 700 |
| `#1e40af` | `oklch(0.40 0.24 270)` | Blue 800 |
| `#1e3a8a` | `oklch(0.33 0.20 270)` | Blue 900 |
### Greens
| Hex | oklch() | Description |
| --------- | -------------------- | -------------- |
| `#f0fdf4` | `oklch(0.99 0.01 142)` | Green 50 |
| `#dcfce7` | `oklch(0.97 0.03 142)` | Green 100 |
| `#bbf7d0` | `oklch(0.93 0.07 142)` | Green 200 |
| `#86efac` | `oklch(0.87 0.13 142)` | Green 300 |
| `#4ade80` | `oklch(0.79 0.18 142)` | Green 400 |
| `#22c55e` | `oklch(0.72 0.15 142)` | Green 500 |
| `#16a34a` | `oklch(0.61 0.17 142)` | Green 600 |
| `#15803d` | `oklch(0.50 0.15 142)` | Green 700 |
| `#166534` | `oklch(0.41 0.13 142)` | Green 800 |
| `#14532d` | `oklch(0.33 0.11 142)` | Green 900 |
### Reds
| Hex | oklch() | Description |
| --------- | -------------------- | -------------- |
| `#fef2f2` | `oklch(0.98 0.01 25)` | Red 50 |
| `#fee2e2` | `oklch(0.95 0.03 25)` | Red 100 |
| `#fecaca` | `oklch(0.90 0.06 25)` | Red 200 |
| `#fca5a5` | `oklch(0.82 0.11 25)` | Red 300 |
| `#f87171` | `oklch(0.73 0.16 25)` | Red 400 |
| `#ef4444` | `oklch(0.65 0.22 25)` | Red 500 |
| `#dc2626` | `oklch(0.55 0.24 25)` | Red 600 |
| `#b91c1c` | `oklch(0.47 0.22 25)` | Red 700 |
| `#991b1b` | `oklch(0.40 0.19 25)` | Red 800 |
| `#7f1d1d` | `oklch(0.33 0.16 25)` | Red 900 |
### Purples
| Hex | oklch() | Description |
| --------- | -------------------- | ---------------- |
| `#faf5ff` | `oklch(0.98 0.01 320)` | Purple 50 |
| `#f3e8ff` | `oklch(0.95 0.04 320)` | Purple 100 |
| `#e9d5ff` | `oklch(0.89 0.08 320)` | Purple 200 |
| `#d8b4fe` | `oklch(0.82 0.14 320)` | Purple 300 |
| `#c084fc` | `oklch(0.73 0.20 320)` | Purple 400 |
| `#a855f7` | `oklch(0.65 0.25 320)` | Purple 500 |
| `#9333ea` | `oklch(0.55 0.28 320)` | Purple 600 |
| `#7e22ce` | `oklch(0.47 0.27 320)` | Purple 700 |
| `#6b21a8` | `oklch(0.40 0.24 320)` | Purple 800 |
| `#581c87` | `oklch(0.33 0.20 320)` | Purple 900 |
### Yellows / Oranges
| Hex | oklch() | Description |
| --------- | -------------------- | ---------------- |
| `#fef3c7` | `oklch(0.96 0.05 90)` | Yellow 100 |
| `#fde047` | `oklch(0.90 0.15 90)` | Yellow 300 |
| `#facc15` | `oklch(0.82 0.18 90)` | Yellow 400 |
| `#eab308` | `oklch(0.75 0.20 90)` | Yellow 500 |
| `#fed7aa` | `oklch(0.89 0.07 60)` | Orange 200 |
| `#fdba74` | `oklch(0.82 0.12 60)` | Orange 300 |
| `#fb923c` | `oklch(0.75 0.16 60)` | Orange 400 |
| `#f97316` | `oklch(0.68 0.20 60)` | Orange 500 |
| `#ea580c` | `oklch(0.60 0.22 60)` | Orange 600 |
### Teals / Cyans
| Hex | oklch() | Description |
| --------- | ---------------------- | -------------- |
| `#ccfbf1` | `oklch(0.95 0.04 180)` | Teal 100 |
| `#99f6e4` | `oklch(0.92 0.08 180)` | Teal 200 |
| `#5eead4` | `oklch(0.86 0.13 180)` | Teal 300 |
| `#2dd4bf` | `oklch(0.79 0.16 180)` | Teal 400 |
| `#14b8a6` | `oklch(0.72 0.17 180)` | Teal 500 |
| `#cffafe` | `oklch(0.98 0.02 200)` | Cyan 100 |
| `#a5f3fc` | `oklch(0.94 0.05 200)` | Cyan 200 |
| `#67e8f9` | `oklch(0.88 0.10 200)` | Cyan 300 |
| `#22d3ee` | `oklch(0.81 0.15 200)` | Cyan 400 |
| `#06b6d4` | `oklch(0.73 0.18 200)` | Cyan 500 |
## Conversion Tips
### Understanding oklch() Parameters
**Lightness (0-1):**
- 0.95-1.0: Very light colors (50-100)
- 0.80-0.95: Light colors (200-300)
- 0.65-0.80: Medium colors (400-500)
- 0.45-0.65: Dark colors (600-700)
- 0.20-0.45: Very dark colors (800-900)
- 0-0.20: Near black
**Chroma (0-0.4):**
- 0: Grayscale
- 0.01-0.05: Very muted
- 0.05-0.15: Muted
- 0.15-0.25: Vibrant
- 0.25+: Very vivid
**Hue (0-360):**
- 0-30: Red
- 30-60: Orange
- 60-90: Yellow
- 90-150: Green
- 150-210: Cyan/Teal
- 210-270: Blue
- 270-330: Purple/Violet
- 330-360: Magenta/Pink
## Online Conversion Tools
1. **OKLCH Color Picker:** https://oklch.com/
2. **Evil Martians OKLCH Converter:** https://oklch.evilmartians.io/
3. **Colorjs.io:** https://colorjs.io/apps/convert/
## Manual Conversion Process
1. Convert hex to RGB
2. Use online tool to convert RGB to OkLCh
3. Round values to 2 decimal places
4. Test in browser to verify appearance
**Example:**
```
Hex: #3b82f6 (Tailwind Blue 500)
RGB: rgb(59, 130, 246)
OkLCh: oklch(0.65 0.25 270)
```
## Custom Color Palette Example
```css
@theme {
--color-brand-purple: oklch(0.65 0.25 320);
--color-brand-blue: oklch(0.65 0.25 270);
--color-brand-teal: oklch(0.72 0.17 180);
--color-success: oklch(0.72 0.15 142);
--color-warning: oklch(0.78 0.18 60);
--color-error: oklch(0.65 0.22 25);
--color-info: oklch(0.73 0.18 200);
--color-text: oklch(0.21 0 0);
--color-text-muted: oklch(0.51 0 0);
--color-background: oklch(0.99 0 0);
--color-surface: oklch(1 0 0);
}
```

450
skills/using-theme-variables/references/namespace-reference.md Normal file
View File

@@ -0,0 +1,450 @@
# Theme Variable Namespace Reference
## Complete Namespace Documentation
### Color Namespace: `--color-*`
**Generates utilities:** bg-, text-, fill-, stroke-, border-, ring-, outline-, decoration-, caret-
**Definition:**
```css
@theme {
--color-primary: oklch(0.65 0.25 270);
--color-brand: oklch(0.75 0.22 320);
--color-error: oklch(0.65 0.22 25);
}
```
**Usage:**
```html
<div class="bg-primary text-white border-primary"></div>
<svg class="fill-brand stroke-brand"></svg>
<input class="ring-error outline-error caret-error" />
```
**With opacity modifiers:**
```html
<div class="bg-primary/50 text-brand/75"></div>
```
### Font Family: `--font-*`
**Generates utilities:** font-{name}
**Definition:**
```css
@theme {
--font-sans: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--font-display: 'Satoshi', sans-serif;
--font-script: 'Great Vibes', cursive;
}
```
**Usage:**
```html
<body class="font-sans">
<h1 class="font-display">Heading</h1>
<code class="font-mono">Code</code>
<p class="font-script">Script text</p>
</body>
```
### Font Size: `--text-*`
**Generates utilities:** text-{size}
**Definition:**
```css
@theme {
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
}
```
**Usage:**
```html
<p class="text-sm">Small text</p>
<h1 class="text-4xl">Large heading</h1>
```
### Font Weight: `--font-weight-*`
**Generates utilities:** font-{weight}
**Definition:**
```css
@theme {
--font-weight-thin: 100;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
}
```
**Usage:**
```html
<p class="font-light">Light text</p>
<strong class="font-bold">Bold text</strong>
<h1 class="font-black">Black weight</h1>
```
### Letter Spacing: `--tracking-*`
**Generates utilities:** tracking-{size}
**Definition:**
```css
@theme {
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0em;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
}
```
**Usage:**
```html
<p class="tracking-tight">Tight spacing</p>
<p class="tracking-wide">Wide spacing</p>
```
### Line Height: `--leading-*`
**Generates utilities:** leading-{size}
**Definition:**
```css
@theme {
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
}
```
**Usage:**
```html
<p class="leading-tight">Tight line height</p>
<p class="leading-loose">Loose line height</p>
```
### Breakpoints: `--breakpoint-*`
**Generates responsive variants:** {breakpoint}:
**Definition:**
```css
@theme {
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
--breakpoint-xl: 80rem;
--breakpoint-2xl: 96rem;
--breakpoint-3xl: 120rem;
}
```
**Usage:**
```html
<div class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"></div>
<p class="text-base lg:text-lg 2xl:text-xl 3xl:text-2xl"></p>
```
### Spacing: `--spacing-*`
**Generates utilities:** p-, m-, w-, h-, gap-, space-, inset-, top-, right-, bottom-, left-
**Definition:**
```css
@theme {
--spacing: 0.25rem;
--spacing-px: 1px;
--spacing-0: 0;
--spacing-1: calc(var(--spacing) * 1);
--spacing-2: calc(var(--spacing) * 2);
--spacing-4: calc(var(--spacing) * 4);
--spacing-8: calc(var(--spacing) * 8);
--spacing-16: calc(var(--spacing) * 16);
--spacing-18: 4.5rem;
--spacing-72: 18rem;
}
```
**Usage:**
```html
<div class="p-4 m-2 w-18 h-72"></div>
<div class="gap-8 space-x-4"></div>
<div class="top-16 left-8"></div>
```
### Border Radius: `--radius-*`
**Generates utilities:** rounded-{size}
**Definition:**
```css
@theme {
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;
--radius-full: 9999px;
}
```
**Usage:**
```html
<div class="rounded-md"></div>
<button class="rounded-lg"></button>
<div class="rounded-4xl"></div>
<img class="rounded-full" />
```
### Box Shadow: `--shadow-*`
**Generates utilities:** shadow-{size}
**Definition:**
```css
@theme {
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--shadow-brutal: 8px 8px 0 0 rgb(0 0 0);
}
```
**Usage:**
```html
<div class="shadow-md"></div>
<div class="shadow-xl hover:shadow-2xl"></div>
<div class="shadow-brutal"></div>
```
### Animations: `--animate-*`
**Generates utilities:** animate-{name}
**Definition:**
```css
@theme {
--animate-spin: spin 1s linear infinite;
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--animate-bounce: bounce 1s infinite;
--animate-fade-in: fade-in 0.3s ease-out;
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
50% {
opacity: 0.5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
```
**Usage:**
```html
<div class="animate-spin"></div>
<div class="animate-pulse"></div>
<div class="animate-fade-in"></div>
```
### Z-Index: `--z-*`
**Generates utilities:** z-{index}
**Definition:**
```css
@theme {
--z-0: 0;
--z-10: 10;
--z-20: 20;
--z-30: 30;
--z-40: 40;
--z-50: 50;
--z-modal: 100;
--z-dropdown: 200;
--z-tooltip: 300;
}
```
**Usage:**
```html
<div class="z-10"></div>
<div class="z-modal"></div>
<div class="z-tooltip"></div>
```
### Aspect Ratio: `--aspect-*`
**Generates utilities:** aspect-{ratio}
**Definition:**
```css
@theme {
--aspect-auto: auto;
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-portrait: 3 / 4;
--aspect-ultrawide: 21 / 9;
}
```
**Usage:**
```html
<img class="aspect-square" />
<video class="aspect-video" />
<div class="aspect-portrait"></div>
```
## Complete Example
```css
@import 'tailwindcss';
@theme {
--font-sans: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--font-display: 'Satoshi', sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--tracking-tight: -0.025em;
--tracking-normal: 0em;
--tracking-wide: 0.025em;
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--color-white: #ffffff;
--color-black: #000000;
--color-gray-50: oklch(0.99 0 0);
--color-gray-900: oklch(0.21 0 0);
--color-primary: oklch(0.65 0.25 270);
--color-secondary: oklch(0.75 0.22 320);
--color-success: oklch(0.72 0.15 142);
--color-error: oklch(0.65 0.22 25);
--spacing: 0.25rem;
--spacing-1: calc(var(--spacing) * 1);
--spacing-2: calc(var(--spacing) * 2);
--spacing-4: calc(var(--spacing) * 4);
--spacing-8: calc(var(--spacing) * 8);
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
--breakpoint-xl: 80rem;
--animate-spin: spin 1s linear infinite;
@keyframes spin {
to {
transform: rotate(360deg);
}
}
}
```