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

# Color system

> All 18 colour tokens, what each one drives, and how to rebrand VARAHI with three settings.

# Color system

VARAHI uses a **Material-style token architecture**: a small set of semantic tokens that
every section consumes, layered over a fixed surface ramp. You do not pick a colour for
a button — you pick a *role*, and the theme decides where it goes.

![Theme settings colors](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/settings-colors.png)

Theme settings → Colors

***

## Rebrand in three settings

Everything in the theme derives from three merchant-facing colours.

| Setting | Default | Role |
| - | - | - |
| **Primary Color** | `#eafcff` | Primary text on accent surfaces, large emphasis |
| **Primary Container** | `#00f0ff` | Buttons, links, focus rings, active states, the signature cyan |
| **Secondary Container** | `#9b5de5` | The violet counterpoint — accents, highlights, secondary emphasis |
| **Background Color** | `#05080d` | The page canvas every section sits on |

> [!NOTE]
>
> Set **Primary Container** and **Secondary Container** first. Those two carry
> essentially all the visual identity. The rest of the ramp re-derives automatically
> and stays legible.

***

## The full token list

### Primary — your signature colour

| Token | Default | Used for |
| - | - | - |
| `color_primary` | `#eafcff` | Primary text on coloured surfaces |
| `color_on_primary` | `#002022` | Text on a primary fill |
| `color_primary_container` | `#00f0ff` | Buttons, links, focus rings, icons, glows |
| `color_on_primary_container` | `#002022` | Text on a primary container |
| `color_primary_fixed` | `#38fdf8` | Fixed primary across themes |
| `color_primary_fixed_dim` | `#00c3d9` | Dimmed fixed primary |
| `color_on_primary_fixed` | `#002022` | Text on fixed primary |
| `color_on_primary_fixed_variant` | `#004f54` | Muted text on fixed primary |

### Secondary — the counterpoint

| Token | Default | Used for |
| - | - | - |
| `color_secondary` | `#b87df8` | Secondary emphasis text |
| `color_on_secondary` | `#24063a` | Text on secondary |
| `color_secondary_container` | `#9b5de5` | Accent fills, the violet glow |
| `color_on_secondary_container` | `#f8d8ff` | Text on secondary container |
| `color_secondary_fixed` | `#b87df8` | Fixed secondary |
| `color_secondary_fixed_dim` | `#9b5de5` | Dimmed fixed secondary |
| `color_on_secondary_fixed` | `#24063a` | Text on fixed secondary |
| `color_on_secondary_fixed_variant` | `#4a1d75` | Muted text on fixed secondary |

### Surfaces — the depth ramp

VARAHI is a **dark-first** theme. The surface ramp is fixed and gives the theme its
depth: panels read as elevated because they sit on a *lighter* step of the ramp, not
because they have a heavy shadow.

| Token | Value | Used for |
| - | - | - |
| `color_surface` | `#05080d` | Page background |
| `color_surface_dim` | `#04070a` | Recessed areas |
| `color_surface_container_low` | `#070b10` | Low-elevation panels |
| `color_surface_container` | `#0b1119` | Standard cards |
| `color_surface_container_high` | `#101824` | Raised panels, nav bar |
| `color_surface_container_highest` | `#192436` | Highest elevation, dropdowns |
| `color_surface_variant` | `#23324a` | Outlines, dividers |
| `color_on_surface` | `#e2e8f0` | Primary body text |
| `color_on_surface_variant` | `#94a3b8` | Secondary text, captions |

### Status colours

| Token | Value | Used for |
| - | - | - |
| `color_success` | `#34d399` | In-stock, order confirmed |
| `color_warning` | `#fbbf24` | Low stock, expiring |
| `color_error` | `#ff6b6b` | Sold out, form errors |
| `color_tertiary_container` | `#fed639` | Bulk-pack savings chip |

***

## Glass and glow

The theme's signature "Obsidian Signal" look comes from four composite tokens you can
reuse in custom CSS.

```css theme={"system"}
--glass-panel-bg: rgba(13, 20, 31, .72);
--glass-card-bg: rgba(16, 26, 42, .6);
--glass-border: rgba(0, 240, 255, .12);
--glass-glow: 0 0 25px rgba(0, 240, 255, .35);
```

> [!WARNING]
>
> Glass panels use `backdrop-filter`. On very low-end Android devices the blur can
> be expensive. If you see scroll jank, raise the panel opacity or remove the blur —
> the panel still reads correctly without it.

***

## Contrast is enforced

VARAHI's palette is checked against WCAG AA for body text. When you change your brand
colours, verify the two pairs that matter most:

| Pair | Minimum |
| - | - |
| Text on your primary container | 4.5:1 |
| Body text on your background | 4.5:1 |

The theme already ships a passing contrast audit — changing colours is the one action
that can break it.

> [!TIP]
>
> Keep the **background** dark. The glass surfaces, the glows and the grid overlays are
> all tuned for a dark canvas. A light background will work, but you will need to
> override several surface tokens to keep the elevation readable.

***

> **[Typography](https://varaahi.vritservicespro.com/settings/typography.md)**
>
> Fonts, the type scale, and how VARAHI loads them.

> **[Branding](https://varaahi.vritservicespro.com/settings/branding.md)**
>
> Logo, favicon, social share image.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.