> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tariqdev.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors and Theme

> Customize Sonata colors, light mode, dark mode, depth, buttons, cards, and border beam effects.

# Colors and Theme

Global visual styling lives in:

```txt theme={null}
app/globals.css
```

Use this file to change the theme without editing every component.

<Info>
  Change tokens first. Edit component classes only when the token system cannot express the brand style you need.
</Info>

## Accent Tokens

Main accent colors:

```css theme={null}
:root {
  --accent: #9333ea;
  --accent-hover: #a855f7;
  --accent-text: #c084fc;
  --accent-glow: #7e22ce;
}
```

Also update:

```txt theme={null}
lib/config/site.ts
```

Look for:

```ts theme={null}
seo.themeColor
```

## Background Tokens

```css theme={null}
--bg-base
--bg-surface
--bg-elevated
```

Use these for page backgrounds, cards, panels, and elevated surfaces.

## Text Tokens

```css theme={null}
--text-base
--text-dim
--text-muted
--text-subtle
--text-faint
```

If readability feels weak in light mode, update `html.light` values too.

## Light Mode

Light mode overrides live in:

```css theme={null}
html.light {
}
```

When changing color, depth, or contrast, check both modes.

## Depth Tokens

Sonata uses depth tokens to create tactile buttons and cards.

Important tokens:

```css theme={null}
--depth-highlight
--depth-highlight-strong
--depth-shadow-soft
--depth-shadow-deep
--depth-accent-shadow
--depth-accent-glow
--depth-surface-shadow
--depth-surface-shadow-hover
--depth-control-shadow
--depth-control-shadow-hover
--depth-accent-shadow-stack
--depth-accent-shadow-hover
--depth-pressed-shadow
```

## Shared Visual Hooks

```css theme={null}
.game-plan-card
.product-plan-card
.hero-cta-soft
```

Use these hooks for consistent visual language.

## Border Beam

Border beam values:

```css theme={null}
--border-beam-size
--border-beam-width
--border-beam-color-from
--border-beam-color-to
--border-beam-opacity
--border-beam-blur
```

If the beam feels too bright, lower `--border-beam-opacity`.

If it feels too sharp, increase `--border-beam-blur`.

## Recommended Color Workflow

1. Pick one primary accent color.
2. Create hover, text, and glow variants.
3. Update dark mode tokens.
4. Update `html.light` tokens.
5. Update `seo.themeColor`.
6. Test buttons, badges, cards, nav, and forms.

## Contrast Checks

Check contrast on:

* Primary buttons.
* Secondary buttons.
* Plan card text.
* Muted feature text.
* Header links.
* Footer links.
* Form placeholders.
* Badges and pills.

If a color works in dark mode but looks weak in light mode, create a separate light mode value.

## Button and Card Depth

Sonata's visual style depends on depth.

When changing shadows:

* Keep pressed states visibly different from hover states.
* Avoid shadows that make small button text harder to read.
* Check card hover states on light backgrounds.
* Check primary CTA glow against hero content.

## Rebrand Checklist

* Accent tokens updated.
* Light mode tokens updated.
* Metadata theme color updated.
* Logo assets replaced.
* Open Graph image replaced.
* Favicon replaced.
* Buttons are readable.
* Cards still have clear borders.
* Border beam is visible but not distracting.