# Customizing Theme Colors & Fonts

## Customizing Theme Colors & Fonts

The Finzo theme uses CSS variables in `src/styles/theme.css` for colors and typography. Update these values to match your brand.

```css
/* src/styles/theme.css */
@theme inline {
  /* Configure font families in `src/config/fonts.json` */
  --leading-body: 1.8;
  --leading-inherit: inherit;

  /* Colors */
  --color-primary: #0031F4;
  --color-secondary: #9ECF59;
  --color-tertiary: #94E4F1;
  --color-accent: #6366F1;
  --color-body: #fff;
  --color-border-light: #ECEEF1;
  --color-theme-light: #FAFAFA;
  --color-theme-dark: #372D3F;
  
  --color-text-default: #3B3B3B;
  --color-dark: #322B2B; /* Heading colors */
  --color-light: #fff6f6;

}
```

### Customizing Colors
- Adjust the `--color-*` variables to match your brand palette.
- Update `--color-text-*` variables to refine text contrast.

---

### Typography Settings
Fonts are configured in `src/config/fonts.json` and loaded automatically.

```json
[
  {
    "name": "Figtree",
    "weights": [
      400,
      500
    ],
    "styles": [
      "normal"
    ],
    "preload": false,
    "display": "swap",
    "cssVariable": "--font-primary",
    "provider": "google",
    "subsets": [
      "latin"
    ],
    "fallbacks": [
      "sans-serif"
    ]
  },
  {
    "name": "Instrument Serif",
    "weights": [
      400
    ],
    "styles": [
      "normal",
      "italic"
    ],
    "preload": false,
    "display": "swap",
    "cssVariable": "--font-secondary",
    "provider": "google",
    "subsets": [
      "latin"
    ],
    "fallbacks": [
      "sans-serif"
    ]
  }
]
```

#### Font Customization
- Update `name`, `weights`/`variants`, and `styles` to match your brand.
- Keep `cssVariable` in sync with theme styles that reference it.
- For local fonts, ensure the `src` paths exist and are committed.