CSS variables

Declare design tokens once in :root and reuse them anywhere via var(--name) — or via the shorter [name] form, which Rat rewrites to var(--name) at parse time. The same brackets that read state in markup work in style blocks.

Declare tokens

styles/tokens.styles.rat

Put your palette and spacing scale on :root so every selector can read them with var(--name). Light/dark theming is a matter of overriding the tokens — no per-rule rewrite.

> [:root]
    --ink: #1c1c1c;
    --paper: #faf8f3;
    --accent: #b8341c;
    --gap: 1rem;

Reference with var()

Same CSS you would write by hand

Standard CSS — no Rat magic required. Use this when you want it to look like CSS to a reader who doesn't know the bracket form.

> [body]
    background: var(--paper);
    color: var(--ink);
    padding: var(--gap);

Bracket shorthand

rewrites to var(--name) in CSS values

Inside a style block, an identifier in brackets becomes a var() reference. Same source-of-truth, fewer characters. Dotted or expression-style brackets are left untouched — only the bare-identifier form rewrites.

> [.button]
    background: [accent];
    color: [paper];
    padding: [gap];

Next section: Data — modelling tables with > model and what the runtime does with them.