CSS variables

Declare design tokens once in :root and reuse them anywhere via var(--name). Or use 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 and dark theming is just 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

This is standard CSS, with nothing Rat-specific required. Use it when you want the styles to read as plain CSS to someone 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, so only the bare-identifier form rewrites.

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

See also Style blocks · Inline styles · Interpolation