# Design Tokens

All IO design tokens as CSS variables. Import `design-system/tokens.css` to use.

## Color — Backgrounds {#color-backgrounds}

```css
--color-bg-primary:        #ffffff
--color-bg-secondary:      #f5f5f7
--color-bg-tertiary:       #e8e8ed
--color-bg-dark:           #000000
--color-bg-dark-secondary: #1d1d1f
--color-bg-dark-tertiary:  #2d2d2f
```

## Color — Text {#color-text}

```css
--color-text-primary:      #1d1d1f
--color-text-secondary:    #6e6e73
--color-text-tertiary:     #a1a1a6
--color-text-on-dark:      #f5f5f7
--color-text-on-dark-dim:  #86868b
```

## Color — Accent {#color-accent}

```css
--color-accent:            #0071e3
--color-accent-hover:      #0077ed
--color-accent-on-dark:    #2997ff
```

## Typography — Font Family {#typography-family}

```css
--font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif
--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif
--font-mono:    "SF Mono", "JetBrains Mono", "Fira Code", monospace
```

## Typography — Scale {#typography-scale}

```css
--text-hero-size:    80px   /* Clamp: min 48px */
--text-display-size: 56px  /* Clamp: min 32px */
--text-title1-size:  48px  /* Clamp: min 24px */
--text-title2-size:  28px
--text-title3-size:  21px
--text-headline-size: 17px
--text-body-size:    17px
--text-subhead-size: 15px
--text-footnote-size: 13px
--text-caption-size: 12px
--text-label-size:   11px
```

## Spacing {#spacing}

```css
--space-2:  8px   /* Base unit */
--space-4:  16px
--space-6:  24px
--space-8:  32px
--space-12: 48px
--space-16: 64px
--space-20: 80px  /* Section padding */
--space-30: 120px /* Section padding large */
```

## Border Radius {#border-radius}

```css
--radius-sm:   8px
--radius-md:   12px
--radius-lg:   18px   /* Cards, modules */
--radius-xl:   24px
--radius-pill: 980px  /* Buttons */
```

## Motion {#motion}

```css
--ease-io:       cubic-bezier(0.25, 0.46, 0.45, 0.94)
--ease-io-spring: cubic-bezier(0.34, 1.56, 0.64, 1)
--duration-fast: 150ms
--duration-base: 300ms
--duration-slow: 500ms
```

## Containers {#containers}

```css
--container-narrow:  640px
--container-default: 980px
--container-wide:    1200px
```