# Customizing Theme Colors & Fonts

## Customizing Theme Colors & Fonts

Veltro uses Tailwind CSS 4 tokens in `src/styles/theme.css` and font definitions in `src/config/fonts.json`.

### Colors
```css
/* src/styles/theme.css */
@theme inline {
  --color-primary: #c8f8a9;
  --color-primary-soft: #eef7fe;
  --color-accent: #0f3d3a;
  --color-body: #ffffff;
  --color-body-secondary: #fafafa;
  --color-body-dark: #10173d;
  --color-theme-dark: #040d43;
  --color-theme-light: #f5f6f7;
  --color-text-dark: #1e1e1e;
  --color-text-light: #ffffff;
  --color-border-primary: #adda90;
  --color-border-light: #eeeeee;
  --color-border-dark: #130d0d;
}
```

Update the `--color-*` tokens instead of replacing color classes across components. Review buttons, navigation, dark sections, form states, and footer contrast after a rebrand.

The same file also controls breakpoints, radii, line-height, aspect ratios, and the modular type scale through `--text-base` and `--text-base-scale`.

### Fonts
Veltro ships with three configured families:

- Inter: `--font-primary`, used for body text
- Space Grotesk: `--font-secondary`, used for headings by default
- Funnel Display: `--font-ternary`, available when `Base.astro` receives `hasHeadingFontTernary={true}`

Example font entry:

```json
{
  "name": "Inter",
  "variants": [
    { "style": "normal", "weight": "400" },
    { "style": "normal", "weight": "500" },
    { "style": "normal", "weight": "600" },
    { "style": "normal", "weight": "700" }
  ],
  "preload": false,
  "display": "swap",
  "cssVariable": "--font-primary",
  "provider": "google",
  "subsets": ["latin"],
  "fallback": "sans-serif"
}
```

`astro.config.mjs` passes this file through `generateAstroFontsConfig()`, and `Head.astro` renders each configured font variable with Astro's font component. Keep each `cssVariable` aligned with the classes generated by the theme.