# Customizing Theme Colors & Fonts

## Customizing Theme Colors & Fonts

Techlo uses Tailwind CSS 4 theme variables in `src/styles/theme.css`. Update those values to match your brand palette and typography.

```css
/* src/styles/theme.css */
@theme inline {
  --leading-body: 1.8;

  /* Brand colors */
  --color-primary: #2B4DFF;
  --color-primary-soft: #EEF1FF;
  --color-accent: #e3ff04;

  /* Surface colors */
  --color-body: #fff;
  --color-body-dark: #070800;
  --color-theme-dark: #040D43;
  --color-theme-light: #F5F6F7;

  /* Content colors */
  --color-dark: #0A165E;
  --color-light: #CED0DF;
  --color-text-default: #585B6F;

  /* Border colors */
  --color-border-light: #e5e5e5;
  --color-border-dark: #272F5D;
}
```

### Customizing Colors
- Update the `--color-*` variables in `src/styles/theme.css`.
- `--color-primary` drives buttons, links, and accents; `--color-accent` is the lime highlight used on badges and small details.
- `--color-theme-dark` is the background of the dark footer and other dark sections. `--color-body-dark` is the dark page background.
- Keep contrast in mind for button states, footer text, and dark sections. If you change brand colors heavily, review `buttons.css`, `navigation.css`, and `components.css` afterwards.

---

### Typography Settings
Fonts are configured in `src/config/fonts.json` and wired into Astro through `astro.config.mjs`. Techlo ships with **Sora** as its primary font, and **IBM Plex Sans Arabic** for Arabic pages.

```json
[
  {
    "name": "Sora",
    "variants": [
      { "style": "normal", "weight": "400" },
      { "style": "normal", "weight": "500" },
      { "style": "normal", "weight": "700" }
    ],
    "preload": true,
    "display": "swap",
    "cssVariable": "--font-primary",
    "provider": "google",
    "subsets": ["latin"],
    "fallback": "sans-serif"
  },
  {
    "name": "IBM Plex Sans Arabic",
    "variants": [
      { "style": "normal", "weight": "400" },
      { "style": "normal", "weight": "500" },
      { "style": "normal", "weight": "700" }
    ],
    "preload": false,
    "display": "swap",
    "cssVariable": "--font-arabic",
    "provider": "google",
    "subsets": ["arabic"],
    "fallback": false,
    "languages": ["ar"]
  }
]
```

#### Font Customization
- Update `name`, `variants`, `provider`, and `subsets` to match your preferred font.
- Keep `cssVariable` aligned with the variables the styles use (`--font-primary`, and `--font-arabic` for Arabic).
- `languages` loads a font only on pages in those languages. See [RTL & Arabic](../../features/rtl-arabic/).
- The type scale itself is generated from `--text-base` and `--text-base-scale` in `theme.css`, so you can resize all headings at once by tuning those two values.
- Latin text uses one font stack, so if you add a second family, also update the styles that should consume it.