# Scale tokens

The non-color primitives: type, spacing, radius, shadow, motion, and layering.
They live in `tokens/scale.css` inside `@layer tokens` and don't change between
themes. Consume them everywhere instead of hardcoding pixel values.

## Type scale

A modular ramp from `--text-2xs` (11px) to `--text-8xl` (128px). Values are in
`rem`; the pixel note is the value at a 16px root.

| Token | rem | px |
|---|---|---|
| `--text-2xs` | 0.6875 | 11 |
| `--text-xs` | 0.75 | 12 |
| `--text-sm` | 0.875 | 14 |
| `--text-base` | 1 | 16 |
| `--text-md` | 1.125 | 18 |
| `--text-lg` | 1.25 | 20 |
| `--text-xl` | 1.5 | 24 |
| `--text-2xl` | 1.875 | 30 |
| `--text-3xl` | 2.25 | 36 |
| `--text-4xl` | 3 | 48 |
| `--text-5xl` | 3.75 | 60 |
| `--text-6xl` | 4.5 | 72 |
| `--text-7xl` | 6 | 96 |
| `--text-8xl` | 8 | 128 |

## Weights

| Token | Value |
|---|---|
| `--weight-thin` | 100 |
| `--weight-light` | 300 |
| `--weight-regular` | 400 |
| `--weight-medium` | 500 |
| `--weight-semibold` | 600 |
| `--weight-bold` | 700 |
| `--weight-black` | 900 |

## Leading and tracking

Line height:

| Token | Value |
|---|---|
| `--leading-none` | 1 |
| `--leading-tight` | 1.15 |
| `--leading-snug` | 1.3 |
| `--leading-body` | 1.5 |
| `--leading-relaxed` | 1.65 |
| `--leading-loose` | 1.85 |

Letter spacing:

| Token | Value |
|---|---|
| `--tracking-tighter` | -0.04em |
| `--tracking-tight` | -0.02em |
| `--tracking-snug` | -0.01em |
| `--tracking-normal` | 0 |
| `--tracking-wide` | 0.02em |
| `--tracking-wider` | 0.06em |
| `--tracking-widest` | 0.14em |

## Font families

- `--font-sans`: the system UI sans stack; the default for the whole app.
- `--font-mono`: the system monospace stack; used by code, `<pre>`, the
  terminal component, and inline CLI helpers.
- `--font-serif`: a system serif stack. It is defined and exposed as the
  `.font-serif` utility, but **nothing in the package consumes it by default**.
  It's there for apps that want a serif; point a class at it to use it.

## Spacing

A 4-based scale from `--space-0` to `--space-64`, with fractional half-steps for
tight work (`--space-0-5`, `--space-1-5`, `--space-2-5`, `--space-3-5`) and a
hairline `--space-px` (1px). `--space-4` is 1rem (16px), the base rhythm unit.

```text
--space-0  --space-px  --space-0-5  --space-1  --space-1-5  --space-2  --space-2-5
--space-3  --space-3-5  --space-4  --space-5  --space-6  --space-7  --space-8
--space-9  --space-10  --space-11  --space-12  --space-14  --space-16  --space-20
--space-24  --space-28  --space-32  --space-40  --space-48  --space-56  --space-64
```

## Radius

A scale plus semantic role slots. The scale:

| Token | Value |
|---|---|
| `--radius-none` | 0 |
| `--radius-xs` | 2px |
| `--radius-sm` | 4px |
| `--radius-md` | 6px |
| `--radius-lg` | 8px |
| `--radius-xl` | 12px |
| `--radius-2xl` | 16px |
| `--radius-3xl` | 24px |
| `--radius-4xl` | 32px |
| `--radius-full` | 9999px |

The role slots (defined in the theme) map those onto component intents so the
radius is adjustable in one place. See [component tokens](components).

## Shadow

Elevation ramp: `--shadow-xs`, `--shadow-sm`, `--shadow-md`, `--shadow-lg`,
`--shadow-xl`, `--shadow-2xl`, plus `--shadow-inner`. Tuned on a cool navy tint
to match the neutral ramp.

## Motion

Durations:

| Token | Value |
|---|---|
| `--duration-instant` | 80ms |
| `--duration-fast` | 120ms |
| `--duration-normal` | 180ms |
| `--duration-slow` | 280ms |
| `--duration-slower` | 500ms |

Easings: `--ease-linear`, `--ease-out`, `--ease-in`, `--ease-in-out`,
`--ease-spring`.

The theme also ships ready-made transition presets (`--transition-colors`,
`--transition-shadow`, `--transition-transform`, `--transition-opacity`) used by
components and available as `.transition-*` utilities.

**Reduced motion.** `themes/default.css` ships a global
`@media (prefers-reduced-motion: reduce)` block that near-zeroes all animation
and transition durations and disables smooth scroll. You get this for free; you
don't need to guard your own transitions unless they're essential.

## Layering (z-index)

A named stack so overlapping UI stays consistent:

| Token | Value |
|---|---|
| `--z-base` | 0 |
| `--z-raised` | 10 |
| `--z-sticky` | 100 |
| `--z-fixed` | 200 |
| `--z-overlay` | 1000 |
| `--z-modal` | 1010 |
| `--z-popover` | 1020 |
| `--z-dropdown` | 1030 |
| `--z-tooltip` | 1040 |
| `--z-toast` | 1050 |
| `--z-top` | max int |

## Opacity

| Token | Value |
|---|---|
| `--opacity-disabled` | 0.55 |
| `--opacity-muted` | 0.7 |
| `--opacity-overlay` | 0.5 |

## Breakpoints

Reference values only. CSS custom properties can't be used inside a media query,
so these document the intended widths; the `@media` rules across the package
hardcode the same `rem` values.

| Token | Value |
|---|---|
| `--bp-sm` | 40rem |
| `--bp-md` | 48rem |
| `--bp-lg` | 64rem |
| `--bp-xl` | 80rem |
| `--bp-2xl` | 96rem |

The package does not apply one uniform breakpoint everywhere. The breakpoints
that actually fire are mixed by design: the two-column form grid collapses at
**40rem**, the app sidebar collapses at **48rem**, and the responsive utility
variants (`md:`, `lg:`) key on **48rem** and **64rem**. Match the breakpoint to
the thing you're making responsive rather than assuming a single system.

## Container widths

Max-width tokens for constraining content, `--container-xs` … `--container-7xl`
(see `elements man style/reference/scale` for every value), plus role widths `--container-prose` (65ch),
`--container-shell` (72rem), `--container-wide` (80rem), and
`--container-padding` (the default gutter, `--space-8`). These back the
`.page-shell` variants and the `.max-w-*` utilities.