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

# CSS Variables

> Learn how to utilize CSS variables to customize your website.

CSS Custom Properties (variables) are great for quickly changing certain parts of the styling without any complex coding. The whole theme has been rewritten recently to facilitate this functionality.

To change any of the supported variables, go to `Appearance` → `Customizer` → `Visuals` and put this code into the Custom CSS field:

```css theme={null}
body {
  --chipmunk--typography--font-size: 1.8rem !important;
}
```

The complete list of supported CSS variable can be found below. The list will be updated continuously whenever the theme changes so make sure to check it every once in a while to keep yourself up to date.

## Colors

```css theme={null}
// Default colors
--chipmunk--color--accent: #5b5c89;
--chipmunk--color--black: #1d1d1d;
--chipmunk--color--gray-dark: #444;
--chipmunk--color--gray: #777;
--chipmunk--color--gray-light: #cdcdcd;
--chipmunk--color--gray-lighter: #e6e6e6;
--chipmunk--color--gray-lightest: #ededed;
--chipmunk--color--white: #fafafa;

// Status colors
--chipmunk--color--status-success: #4f8a10;
--chipmunk--color--status-warning: #9f6000;
--chipmunk--color--status-info: #369bf8;
--chipmunk--color--status-error: #f74444;

// Customizable colors
--chipmunk--color--primary: var(--chipmunk--color--accent);
--chipmunk--color--link: var(--chipmunk--color--accent);
--chipmunk--color--background: var(--chipmunk--color--gray-lightest);
--chipmunk--color--section: var(--chipmunk--color--white);
```

## Typography

```css theme={null}
// Fonts
--chipmunk--font--system: -apple-system, BlinkMacSystemFont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--chipmunk--font--mono: menlo, consolas, monaco, monospace;

// Typography
--chipmunk--typography--font-family: var(--chipmunk--font--system);
--chipmunk--typography--font-size: 1.6rem;
--chipmunk--typography--line-height: 1.618;

// Headings
--chipmunk--typography--scale: 1.25;
--chipmunk--typography--small: var(--chipmunk--typography--font-size);
--chipmunk--typography--normal: var(--chipmunk--typography--small) * var(--chipmunk--typography--scale);
--chipmunk--typography--medium: var(--chipmunk--typography--normal) * var(--chipmunk--typography--scale);
--chipmunk--typography--large: var(--chipmunk--typography--medium) * var(--chipmunk--typography--scale);
--chipmunk--typography--xlarge: var(--chipmunk--typography--large) * var(--chipmunk--typography--scale);
--chipmunk--typography--huge: var(--chipmunk--typography--xlarge) * var(--chipmunk--typography--scale);
--chipmunk--typography--heading-font-family: var(--chipmunk--font--system);

// Content
--chipmunk--typography--content-size: 1.25em;
```

## Layout

```css theme={null}
// Container
--chipmunk--layout--container-width: 110rem;
--chipmunk--layout--container-gutter: clamp(2.4rem, 5vw, 7.2rem);

// Columns
--chipmunk--layout--column-gutter: calc(var(--chipmunk--layout--container-width) * 0.025);

// Content
--chipmunk--layout--content-width: 8;

// Popup
--chipmunk--layout--popup-width: 80rem;

// Tiles
--chipmunk--layout--tile-padding: 1rem;
```

## Buttons

```css theme={null}
--chipmunk--button--border-width: 1px;
--chipmunk--button--border-radius: 100vmin;
--chipmunk--button--font-size: 0.875em;
```

## Miscellaneous

```css theme={null}
// Transitions
--chipmunk--transition-duration: 0.25s;

// Spacers
--chipmunk--spacer: 1.25em;

// Borders
--chipmunk--border-opacity: 0.075;
--chipmunk--border-radius: 0.5rem;

// Logo
--chipmunk--logo-height: 4rem;
```