# Design Tokens

All component styling is driven by CSS custom properties. Override any token by injecting a stylesheet via your Limio settings to customise the look of every component.

[**View live token swatches in Storybook**](https://innovate42.github.io/innovate42-service-template/?path=/docs/design-tokens--docs)

## Colour Tokens

### Primary

| Token                     | Purpose                       | Default        |
| ------------------------- | ----------------------------- | -------------- |
| `--tw-primary`            | Buttons, links, active states | `210, 7%, 33%` |
| `--tw-primary-foreground` | Text on primary backgrounds   | `0, 0%, 100%`  |

### Surfaces

| Token               | Purpose                  | Default        |
| ------------------- | ------------------------ | -------------- |
| `--tw-surface-main` | Page/section backgrounds | `210, 7%, 95%` |
| `--tw-surface`      | Secondary surfaces       | `0, 11%, 98%`  |
| `--tw-background`   | Base layer, inputs       | `0 0% 100%`    |

### Cards

| Token                  | Purpose                   | Default        |
| ---------------------- | ------------------------- | -------------- |
| `--tw-card`            | Card background           | `0 0% 100%`    |
| `--tw-card-foreground` | Card text                 | `210, 8%, 19%` |
| `--tw-card-secondary`  | Alternate card background | `0, 11%, 98%`  |

### Text

| Token                 | Purpose             | Default        |
| --------------------- | ------------------- | -------------- |
| `--tw-text-primary`   | Primary text colour | `210, 8%, 19%` |
| `--tw-text-secondary` | Secondary text      | `210, 7%, 33%` |
| `--tw-text-tertiary`  | De-emphasised text  | `208, 7%, 46%` |
| `--tw-text-muted`     | Muted/disabled text | `208, 7%, 46%` |

### Form States

| Token                   | Purpose             | Default         |
| ----------------------- | ------------------- | --------------- |
| `--tw-form-focus`       | Focus ring colour   | `210, 79%, 46%` |
| `--tw-form-disabled`    | Disabled background | `0, 0%, 95%`    |
| `--tw-form-destructive` | Validation errors   | `0, 65%, 51%`   |
| `--tw-form-accent`      | Checkboxes, toggles | `210, 79%, 42%` |

### Semantic

| Token              | Purpose             | Default         |
| ------------------ | ------------------- | --------------- |
| `--tw-secondary`   | Secondary actions   | `210 40% 96.1%` |
| `--tw-destructive` | Destructive actions | `0 100% 50%`    |
| `--tw-border`      | Borders             | `210, 7%, 83%`  |
| `--tw-popover`     | Popover backgrounds | `0 0% 100%`     |

## Layout Tokens

| Token         | Purpose                       | Default  |
| ------------- | ----------------------------- | -------- |
| `--tw-radius` | Border radius (cards, inputs) | `0.5rem` |

## Typography

The `Text` component provides these variants:

| Variant     | Typical use            |
| ----------- | ---------------------- |
| `h1`        | Page titles            |
| `h2`        | Section headings       |
| `h3`        | Sub-section headings   |
| `body`      | General text (default) |
| `paragraph` | Long-form content      |
| `label`     | Form labels            |
| `legend`    | Fieldset legends       |

Sizes: `small`, `medium`, `large`. Weights: `default`, `emphasised`.

## Overriding tokens

Inject a stylesheet with your custom values:

```css
@layer base {
  :root {
    --tw-primary: 350, 80%, 45%;
    --tw-primary-foreground: 0, 0%, 100%;
    --tw-radius: 0.75rem;
    /* override only what you need -- everything else inherits from default */
  }
}
```

All values are in HSL format **without** the `hsl()` wrapper, so opacity modifiers work automatically (e.g. `hsl(var(--tw-primary) / 0.8)`).

See the [theming guide](https://docs.limio.com/components/ui-primitives-and-theming/theming) for more details.