# Space, radius, and shadow

Spacing runs from `--astryx-spacing-0` through `--astryx-spacing-12`, with `0.5` and `1.5` in between. The values are rem: `--astryx-spacing-2` is `0.5rem` and `--astryx-spacing-4` is `1rem`. At the browser's default 16px root font size each step is 4px times the step, so `--astryx-spacing-2` is 8px. When a reader raises the browser font size, or a page sets `html { font-size }`, gaps and padding grow with the text in the same ratio. At a 20px root, `--astryx-spacing-4` is 20px instead of 16px.

These tokens used to be fixed px. Nothing looks different at the default root. A custom theme that writes spacing in px keeps fixed px; write rem to follow the root font size.

Control heights are `--astryx-size-element-sm` (28px), `md` (32px), and `lg` (36px). They stay px.

Radii run from `--astryx-radius-none` to `--astryx-radius-full`. `--astryx-radius-none` stays `0` in this package. It does not adopt upstream Neutral's `0.25rem`. `--astryx-radius-chat` is 28px. Neutral does not override it. At a 16px root that equals the `1.75rem` page radius.

Shadows have three elevations, `low`, `med`, and `high`, plus inset shadows for hover, selected, success, warning, and error. The outer shadows use offset and blur, and the light and dark stops differ.

The focus ring uses `--astryx-focus-outline-width`, `style`, `color`, and `offset`. The color follows `--astryx-color-accent`.

### spacing

| Token | Value |
| --- | --- |
| `--astryx-spacing-0` | 0rem |
| `--astryx-spacing-0-5` | 0.125rem |
| `--astryx-spacing-1` | 0.25rem |
| `--astryx-spacing-1-5` | 0.375rem |
| `--astryx-spacing-2` | 0.5rem |
| `--astryx-spacing-3` | 0.75rem |
| `--astryx-spacing-4` | 1rem |
| `--astryx-spacing-5` | 1.25rem |
| `--astryx-spacing-6` | 1.5rem |
| `--astryx-spacing-7` | 1.75rem |
| `--astryx-spacing-8` | 2rem |
| `--astryx-spacing-9` | 2.25rem |
| `--astryx-spacing-10` | 2.5rem |
| `--astryx-spacing-11` | 2.75rem |
| `--astryx-spacing-12` | 3rem |

### size

| Token | Value |
| --- | --- |
| `--astryx-size-element-sm` | 28px |
| `--astryx-size-element-md` | 32px |
| `--astryx-size-element-lg` | 36px |

### border

| Token | Value |
| --- | --- |
| `--astryx-border-width` | 1px |

### focus

| Token | Value |
| --- | --- |
| `--astryx-focus-outline-width` | 2px |
| `--astryx-focus-outline-style` | solid |
| `--astryx-focus-outline-color` | var(--astryx-color-accent) |
| `--astryx-focus-outline-offset` | 3px |

### radius

| Token | Value |
| --- | --- |
| `--astryx-radius-none` | 0px |
| `--astryx-radius-inner` | 0.375rem |
| `--astryx-radius-element` | 0.625rem |
| `--astryx-radius-container` | 0.75rem |
| `--astryx-radius-page` | 1.75rem |
| `--astryx-radius-chat` | 28px |
| `--astryx-radius-full` | 9999px |

### shadow

| Token | Value |
| --- | --- |
| `--astryx-shadow-low` | 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)), 0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%)) |
| `--astryx-shadow-med` | 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%)) |
| `--astryx-shadow-high` | 0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%)) |
| `--astryx-shadow-inset-hover` | inset 0px 0px 0px 2px #0074e24d |
| `--astryx-shadow-inset-selected` | inset 0px 0px 0px 2px #0074e280 |
| `--astryx-shadow-inset-success` | inset 0px 0px 0px 2px #2f7d334d |
| `--astryx-shadow-inset-warning` | inset 0px 0px 0px 2px #f8d36a4d |
| `--astryx-shadow-inset-error` | inset 0px 0px 0px 2px #de47454d |