> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS and design tokens

> The CSS custom properties the theme exposes, and where to add your own CSS.

The theme's colors are CSS custom properties on `:root`. That is why a Customizer change updates the whole site — including dark mode — without rebuilding a stylesheet.

## Where the tokens live

| File | Role |
| - | - |
| `style.css` | Declares the light-mode token defaults under `:root` |
| `assets/css/dynamic-vars.css` | Carries logo width rules |
| `assets/css/screen.css` | The main component stylesheet, consuming the tokens |
| Inline styles | Your Customizer values, appended at priority 20 |

## Color tokens

| Token | Default | Controlled by |
| - | - | - |
| `--vara-primary` | `#7c3aed` | Primary |
| `--vara-secondary` | `#cebdff` | Secondary |
| `--vara-accent` | `#4edea3` | Tertiary |
| `--vara-bg` | `#f8fafc` | Background |
| `--vara-surface` | `#ffffff` | Surface / Card BG |
| `--vara-text` | `#0f172a` | Text |
| `--vara-heading` | `#0f172a` | Headings |
| `--vara-muted` | `#55647a` | Muted Text |
| `--vara-link` | `#7c3aed` | Links |
| `--vara-border` | `#e2e8f0` | Borders |
| `--vara-dropdown-bg` | `#ffffff` | Dropdown BG |
| `--vara-logo-width` | — | Logo Max Width |

> [!WARNING]
>
> Token names are internal. They may change between releases. Use the Customizer for branding you need to be durable, and treat direct variable references as a convenience rather than a contract.

## Using the tokens

```css theme={null}
.card {
    background: var( --vara-surface );
    border: 1px solid var( --vara-border );
    color: var( --vara-text );
}

.card__title {
    color: var( --vara-heading );
}

.card__meta {
    color: var( --vara-muted );
}

.card__link {
    color: var( --vara-link );
}
```

## Dark mode

The theme remaps tokens when dark mode is active rather than applying a filter.

```css theme={null}
/* Inspect your site to confirm the exact selector the theme uses. */
.vara-dark {
    --vara-bg: #0b1220;
    --vara-surface: #111a2e;
    --vara-text: #e6ecf5;
}
```

> [!WARNING]
>
> **Check the selector before writing dark-mode overrides.** The theme applies its theme class to the root element. Confirm whether it is a class or a data attribute in your version — inspect the `html` or `body` element with dark mode toggled on rather than guessing.

## Where to put your CSS

Three options, in order of durability.

### 1. Additional CSS — quick, no risk

**Appearance → Customize → Additional CSS**

Best for one or two rules. It loads after the theme's stylesheets and survives updates. If you find yourself adding more than a few rules, move to a child theme.

### 2. Child theme `style.css` — the normal choice

```css theme={null}
/* wp-content/themes/your-child-theme/style.css */
```

Best for any sustained styling. Version-controlled, portable, and never overwritten by an update. See [Child themes](/developers/child-themes.md).

### 3. A compiled build — for larger projects

If you use Sass or Tailwind, compile to a file in your child theme and enqueue it with a dependency on the parent stylesheet.

```php theme={null}
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'my-styles',
        get_stylesheet_directory_uri() . '/dist/main.css',
        array( 'vara-saas-screen' ),
        '1.0.0'
    );
}, 20 );
```

> [!WARNING]
>
> **Never edit `assets/css/screen.css` or `style.css` in the parent theme.** Both are overwritten on every update.

Declaring a dependency on the parent's stylesheet guarantees your CSS loads after it.

## Beating specificity

When your rule does not apply, you are almost always losing a specificity fight.

> **Check the selector order first**
>
> Use your browser's developer tools to see which rule wins and where it comes from. This answers the question in seconds.

> **Prefer tokens over overrides**
>
> Setting `--vara-primary` in your own CSS restyles everything using that token. Overriding individual component selectors means chasing many rules instead of one.

> **Load after, do not out-specify**
>
> A dependency plus later load order is cleaner than `!important` chains.

> **Use `!important` sparingly**
>
> If you must, keep it to a single, well-commented declaration.

```css theme={null}
/* Prefer this — one variable, everything follows. */
.vara-saas-dark-surface {
    --vara-surface: #111a2e;
}

/* Over this — many selectors, all of which can lose. */
.card,
.widget,
.panel,
.post-card {
    background: #111a2e !important;
}
```

## Adding a custom font

Self-host it. Do not link Google Fonts — it adds a third-party connection to every page load and gives the provider your visitors' IP addresses.

```css theme={null}
@font-face {
    font-family: "Your Brand Font";
    src: url("/wp-content/uploads/your-brand-font.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Your Brand Font", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Your Brand Font", system-ui, -apple-system, sans-serif;
}
```

The Customizer's font field is an allowlist of six stacks, so a custom font must come through CSS. See [Typography reference](/customization/typography-reference.md).

## Responsive breakpoints

The theme's layout uses mobile-first CSS.

| Breakpoint | Typical use |
| - | - |
| Base | Single column, mobile menu |
| \~768 px | Two-column card grids |
| \~1024 px | Full desktop layout, sidebar beside content |

## Debugging CSS

| Problem | Tool |
| - | - |
| Which rule is winning? | Browser developer tools, the element inspector |
| What token value is active? | Inspect the `root` element in the computed styles panel |
| Is my file loading at all? | The **Network** tab, filtered to CSS |
| Is a plugin overwriting it? | Search your rendered page for a second copy of your class |

## Related

> **[Colors reference](/customization/colors-reference.md)**
>
> The Customizer settings behind these tokens.

> **[Hooks and filters](/developers/hooks-and-filters.md)**
>
> Enqueue your CSS through a hook.


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