# MCSS-Lite tokens

> Every design token with light and dark values.
> Generated from tokens/*.tokens.json and components/*.json by scripts/build.mjs. Do not edit by hand.
> Package: @gabrielpule/mcss-lite@0.4.1

## Themes

Set `data-theme` on `<html>` or any subtree: `light` (default when absent), `dark`, or `auto` (follows the OS). Only semantic tokens change between themes. Component tokens are unset by default and fall back to semantic tokens, so components follow the theme. If you override a component token with a raw color, set it per theme (see below); a themed subtree also sets its own text and background colors.

To theme for a brand, override semantic tokens, for example:

```css
:root, [data-theme="light"], [data-theme="auto"] { --color-action-primary: #7a2e8f; }
[data-theme="dark"] { --color-action-primary: #b36ad0; }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] { --color-action-primary: #b36ad0; }
}
```

Load your overrides after MCSS-Lite. To restyle one component in every theme, set its component token once on `:root`, for example `:root { --button-radius: 0; }`.

## Semantic tokens (use these)

Values are shown as light / dark.

### Spacing (semantic)

| Token | Value | Use for |
|---|---|---|
| `--space-component-padding` | 1rem | Default inner padding for components. |
| `--space-element-gap` | 0.75rem | Gap between sibling elements inside a component. |
| `--space-section-gap` | 2rem | Gap between page sections. |

### Text

| Token | Value | Use for |
|---|---|---|
| `--color-text-default` | #1a1d20 / #e6edf4 | Default body and heading text. |
| `--color-text-muted` | #343a40 / #cfdae5 | Secondary text: labels, supporting copy. |
| `--color-text-subtle` | #495057 / #a9bacb | Tertiary text: help text, placeholders, icons. 4.5:1 on every background, canvas included. |
| `--color-text-inverse` | #ffffff / #0f2140 | Text on an inverted background. |
| `--color-text-on-action` | #ffffff / #ffffff | Text on --color-action-primary. |
| `--color-text-on-danger` | #ffffff / #ffffff | Text on --color-action-danger. |
| `--color-text-link` | #005a9c / #7cbff1 | Link text. Links are also underlined. |
| `--color-text-link-hover` | #004a80 / #9ccdf4 | Link text on hover. |
| `--color-text-disabled` | #6c757d / #7f95ab | Text in disabled (ghosted) controls. |
| `--color-text-success` | #155724 / #a3d9b1 | Text on --color-background-success. |
| `--color-text-warning` | #856404 / #f5d77a | Text on --color-background-warning. |
| `--color-text-error` | #721c24 / #f4a9b0 | Text on --color-background-error. |
| `--color-text-info` | #0c5460 / #9ad4df | Text on --color-background-info. |

### Backgrounds

| Token | Value | Use for |
|---|---|---|
| `--color-background-default` | #ffffff / #0f2140 | Page background. |
| `--color-background-canvas` | #dcedf9 / #0b1a33 | Instruction-page canvas for showcase and marketing pages; not for dense product UI. |
| `--color-background-subtle` | #f8f9fa / #1b335c | Subtle section or hover background. |
| `--color-background-muted` | #e9ecef / #27436f | Muted fill for neutral badges and chips. |
| `--color-background-raised` | #ffffff / #14294d | Cards, modals and other raised surfaces. |
| `--color-background-interactive` | #ffffff / #14294d | Resting background of controls (buttons, inputs). |
| `--color-background-interactive-hover` | #eef6fc / #1b335c | Hover background of controls. |
| `--color-background-disabled` | #e9ecef / #1b335c | Background of disabled (ghosted) controls. |
| `--color-background-callout` | #fff3cd / #27436f | The 1:1 call-out that introduces a new part. |
| `--color-background-overlay` | rgb(15 33 64 / 0.55) / rgb(0 0 0 / 0.72) | Modal backdrop. |
| `--color-background-success` | #d4edda / #0f2e1a | Background for success messages and badges. |
| `--color-background-warning` | #fff3cd / #3a2e05 | Background for warning messages and badges. |
| `--color-background-error` | #f8d7da / #3b1216 | Background for error messages and badges. |
| `--color-background-info` | #d1ecf1 / #0b2d33 | Background for info messages and badges. |

### Borders

| Token | Value | Use for |
|---|---|---|
| `--color-border-default` | #ced4da / #27436f | Quiet dividers inside a part. |
| `--color-border-strong` | #6c757d / #3b5988 | Emphasized dividers. |
| `--color-border-keyline` | #1a1d20 / #cfdae5 | The 2px ink keyline around every part: cards, controls, call-outs. |
| `--color-border-interactive` | #1a1d20 / #a9bacb | Borders of controls (inputs, default buttons). Meets 3:1 non-text contrast. |
| `--color-border-focus` | #1a1d20 / #f2cd37 | Focus ring color. Same as --color-focus-ring. |
| `--color-border-success` | #1e5631 / #a3d9b1 | Border for the success state. At least 3:1 against fields. |
| `--color-border-warning` | #856404 / #f5d77a | Border for the warning state. At least 3:1 against fields. |
| `--color-border-error` | #c91a09 / #f4a9b0 | Border for the error state. At least 3:1 against fields. |
| `--color-border-info` | #0c5460 / #9ad4df | Border for the info state. At least 3:1 against fields. |

### Actions

| Token | Value | Use for |
|---|---|---|
| `--color-action-primary` | #005a9c / #2576cc | Primary action background. Brick blue. |
| `--color-action-primary-hover` | #004a80 / #185da6 | Primary action on hover. |
| `--color-action-primary-active` | #003860 / #144d8a | Primary action while pressed. |
| `--color-action-danger` | #c91a09 / #c91a09 | Destructive action background. Brick red. |
| `--color-action-danger-hover` | #a01408 / #a01408 | Destructive action on hover. |
| `--color-action-neutral-hover` | #e9ecef / #27436f | Hover background for ghost and icon buttons. |
| `--color-action-loading-stripe` | rgb(0 0 0 / 0.14) / rgb(0 0 0 / 0.22) | Moving stripes on a loading control. Always darkens, so light text keeps its contrast. |

### Focus

| Token | Value | Use for |
|---|---|---|
| `--color-focus-ring` | #1a1d20 / #f2cd37 | Solid 2px focus ring: at least 3:1 on every background in its theme. |
| `--color-focus-ring-error` | #c91a09 / #f4a9b0 | Focus ring on a control in the error state. |
| `--color-focus-halo` | #f2cd37 / #0b1a33 | Outer halo around the focus ring: the yellow "new part" highlight in light, a dark gap in dark. |

### Depth

| Token | Value | Use for |
|---|---|---|
| `--shadow-raised` | 0 2px 0 #1a1d20, 0 3px 8px rgb(26 29 32 / 0.12) / 0 2px 0 rgb(207 218 229 / 0.45), 0 4px 10px rgb(0 0 0 / 0.35) | Brick-edge depth for raised parts: a 2px edge plus a soft blur. |
| `--shadow-elevated` | 0 2px 0 #1a1d20, 0 10px 24px -4px rgb(26 29 32 / 0.22) / 0 2px 0 rgb(207 218 229 / 0.5), 0 12px 28px -4px rgb(0 0 0 / 0.6) | Lifted parts (elevated cards, modals). In dark mode a light rim keeps the edge visible. |

## Scales (primitives safe to use anywhere)

- **font.family:** `--font-family-sans` (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif), `--font-family-mono` ('SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Courier New', monospace), `--font-family-display` (Rubik, ui-rounded, system-ui, sans-serif)
- **font.size:** `--font-size-xs` (0.75rem), `--font-size-sm` (0.875rem), `--font-size-base` (1rem), `--font-size-lg` (1.125rem), `--font-size-xl` (1.25rem), `--font-size-2xl` (1.5rem), `--font-size-3xl` (1.875rem), `--font-size-4xl` (2.25rem), `--font-size-5xl` (3rem)
- **font.weight:** `--font-weight-normal` (400), `--font-weight-medium` (500), `--font-weight-semibold` (600), `--font-weight-bold` (700), `--font-weight-extrabold` (800)
- **line-height:** `--line-height-tight` (1.25), `--line-height-normal` (1.5), `--line-height-relaxed` (1.75)
- **space:** `--space-0` (0), `--space-1` (0.25rem), `--space-2` (0.5rem), `--space-3` (0.75rem), `--space-4` (1rem), `--space-5` (1.25rem), `--space-6` (1.5rem), `--space-8` (2rem), `--space-10` (2.5rem), `--space-12` (3rem), `--space-16` (4rem), `--space-20` (5rem), `--space-24` (6rem)
- **border-radius:** `--border-radius-none` (0), `--border-radius-sm` (0.125rem), `--border-radius-base` (0.25rem), `--border-radius-md` (0.375rem), `--border-radius-lg` (0.5rem), `--border-radius-xl` (0.75rem), `--border-radius-2xl` (1rem), `--border-radius-full` (9999px)
- **border-width:** `--border-width-0` (0), `--border-width-thin` (1px), `--border-width-thick` (2px), `--border-width-thicker` (4px)
- **shadow:** `--shadow-xs` (0 1px 2px rgb(0 0 0 / 0.05)), `--shadow-sm` (0 1px 3px rgb(0 0 0 / 0.1)), `--shadow-base` (0 4px 6px rgb(0 0 0 / 0.1)), `--shadow-md` (0 8px 25px rgb(0 0 0 / 0.1)), `--shadow-lg` (0 25px 50px rgb(0 0 0 / 0.15)), `--shadow-xl` (0 25px 50px rgb(0 0 0 / 0.25))
- **ease:** `--ease-linear` (linear), `--ease-in` (ease-in), `--ease-out` (ease-out), `--ease-in-out` (ease-in-out), `--ease-out-expo` (cubic-bezier(0.16, 1, 0.3, 1))
- **duration:** `--duration-instant` (0ms), `--duration-fast` (150ms), `--duration-base` (250ms), `--duration-slow` (350ms), `--duration-slower` (500ms)
- **z-index:** `--z-index-hide` (-1), `--z-index-base` (0), `--z-index-docked` (10), `--z-index-dropdown` (1000), `--z-index-sticky` (1020), `--z-index-modal-backdrop` (1040), `--z-index-modal` (1050), `--z-index-popover` (1060), `--z-index-toast` (1070), `--z-index-tooltip` (1080)
- **container:** `--container-max-width` (72rem), `--container-narrow` (48rem)

## Component tokens

Optional overrides. They are unset by default; each component falls back to the semantic token shown. Set one on `:root` to restyle a single component in every theme.

| Token | Aliases | Value |
|---|---|---|
| `--button-background` | `--color-background-interactive` | #ffffff / #14294d |
| `--button-background-hover` | `--color-background-interactive-hover` | #eef6fc / #1b335c |
| `--button-border` | `--color-border-interactive` | #1a1d20 / #a9bacb |
| `--button-text` | `--color-text-default` | #1a1d20 / #e6edf4 |
| `--button-radius` | `--border-radius-base` | 0.25rem |
| `--button-shadow` | `--shadow-raised` | 0 2px 0 #1a1d20, 0 3px 8px rgb(26 29 32 / 0.12) / 0 2px 0 rgb(207 218 229 / 0.45), 0 4px 10px rgb(0 0 0 / 0.35) |
| `--button-primary-background` | `--color-action-primary` | #005a9c / #2576cc |
| `--button-primary-background-hover` | `--color-action-primary-hover` | #004a80 / #185da6 |
| `--button-primary-text` | `--color-text-on-action` | #ffffff |
| `--button-primary-border` | `--color-border-keyline` | #1a1d20 / #cfdae5 |
| `--button-primary-background-active` | `--color-action-primary-active` | #003860 / #144d8a |
| `--button-secondary-text` | `--color-text-link` | #005a9c / #7cbff1 |
| `--button-secondary-border` | `--color-action-primary` | #005a9c / #2576cc |
| `--button-ghost-background-hover` | `--color-action-neutral-hover` | #e9ecef / #27436f |
| `--button-danger-background` | `--color-action-danger` | #c91a09 |
| `--button-danger-background-hover` | `--color-action-danger-hover` | #a01408 |
| `--button-danger-text` | `--color-text-on-danger` | #ffffff |
| `--button-danger-border` | `--color-border-keyline` | #1a1d20 / #cfdae5 |
| `--button-pressed-background` | `--color-text-default` | #1a1d20 / #e6edf4 |
| `--button-pressed-border` | `--color-border-keyline` | #1a1d20 / #cfdae5 |
| `--button-pressed-text` | `--color-text-inverse` | #ffffff / #0f2140 |
| `--input-background` | `--color-background-interactive` | #ffffff / #14294d |
| `--input-border` | `--color-border-interactive` | #1a1d20 / #a9bacb |
| `--input-border-focus` | `--color-action-primary` | #005a9c / #2576cc |
| `--input-text` | `--color-text-default` | #1a1d20 / #e6edf4 |
| `--input-placeholder` | `--color-text-subtle` | #495057 / #a9bacb |
| `--input-radius` | `--border-radius-base` | 0.25rem |
| `--card-background` | `--color-background-raised` | #ffffff / #14294d |
| `--card-border` | `--color-border-keyline` | #1a1d20 / #cfdae5 |
| `--card-border-hover` | `--color-action-primary` | #005a9c / #2576cc |
| `--card-radius` | `--border-radius-lg` | 0.5rem |
| `--card-padding` | `--space-6` | 1.5rem |
| `--card-shadow` | `--shadow-raised` | 0 2px 0 #1a1d20, 0 3px 8px rgb(26 29 32 / 0.12) / 0 2px 0 rgb(207 218 229 / 0.45), 0 4px 10px rgb(0 0 0 / 0.35) |
| `--card-shadow-elevated` | `--shadow-elevated` | 0 2px 0 #1a1d20, 0 10px 24px -4px rgb(26 29 32 / 0.22) / 0 2px 0 rgb(207 218 229 / 0.5), 0 12px 28px -4px rgb(0 0 0 / 0.6) |
| `--badge-background` | `--color-background-muted` | #e9ecef / #27436f |
| `--badge-text` | `--color-text-muted` | #343a40 / #cfdae5 |
| `--modal-background` | `--color-background-raised` | #ffffff / #14294d |
| `--modal-backdrop` | `--color-background-overlay` | rgb(15 33 64 / 0.55) / rgb(0 0 0 / 0.72) |
| `--modal-border` | `--color-border-keyline` | #1a1d20 / #cfdae5 |
| `--modal-radius` | `--border-radius-lg` | 0.5rem |
| `--modal-shadow` | `--shadow-elevated` | 0 2px 0 #1a1d20, 0 10px 24px -4px rgb(26 29 32 / 0.22) / 0 2px 0 rgb(207 218 229 / 0.5), 0 12px 28px -4px rgb(0 0 0 / 0.6) |
| `--checkbox-size` | `--space-6` | 1.5rem |
| `--checkbox-background` | `--color-background-interactive` | #ffffff / #14294d |
| `--checkbox-border` | `--color-border-interactive` | #1a1d20 / #a9bacb |
| `--checkbox-checked-background` | `--color-text-default` | #1a1d20 / #e6edf4 |
| `--checkbox-mark` | `--color-text-inverse` | #ffffff / #0f2140 |
| `--checkbox-radius` | `--border-radius-base` | 0.25rem |
| `--radio-dot` | `--color-text-default` | #1a1d20 / #e6edf4 |
| `--toggle-track-off` | `--color-background-muted` | #e9ecef / #27436f |
| `--toggle-track-on` | `--color-text-default` | #1a1d20 / #e6edf4 |
| `--toggle-thumb` | `--color-background-interactive` | #ffffff / #14294d |
| `--toggle-border` | `--color-border-keyline` | #1a1d20 / #cfdae5 |
| `--toggle-mark` | `--color-text-default` | #1a1d20 / #e6edf4 |
| `--icon-size` | `--space-5` | 1.25rem |
| `--icon-size-sm` | `--space-4` | 1rem |
| `--icon-size-lg` | `--space-6` | 1.5rem |
| `--alert-background` | `--color-background-raised` | #ffffff / #14294d |
| `--alert-border` | `--color-border-keyline` | #1a1d20 / #cfdae5 |
| `--alert-edge-info` | `--color-border-info` | #0c5460 / #9ad4df |
| `--alert-edge-success` | `--color-border-success` | #1e5631 / #a3d9b1 |
| `--alert-edge-warning` | `--color-border-warning` | #856404 / #f5d77a |
| `--alert-edge-error` | `--color-border-error` | #c91a09 / #f4a9b0 |

## Primitive colors (do not use in components)

These are the raw palette behind the semantic tokens. They do not change with the theme. Use them only to define your own semantic tokens.

`--color-white`, `--color-black`, `--color-gray-50`, `--color-gray-100`, `--color-gray-200`, `--color-gray-300`, `--color-gray-400`, `--color-gray-450`, `--color-gray-500`, `--color-gray-600`, `--color-gray-700`, `--color-gray-800`, `--color-gray-850`, `--color-gray-900`, `--color-primary`, `--color-primary-hover`, `--color-primary-active`, `--color-accent`, `--color-blue-50`, `--color-blue-100`, `--color-blue-150`, `--color-blue-200`, `--color-blue-300`, `--color-blue-400`, `--color-blue-600`, `--color-blue-700`, `--color-blue-800`, `--color-green-100`, `--color-green-200`, `--color-green-300`, `--color-green-800`, `--color-green-900`, `--color-green-950`, `--color-yellow-100`, `--color-yellow-200`, `--color-yellow-300`, `--color-yellow-400`, `--color-yellow-800`, `--color-yellow-900`, `--color-yellow-950`, `--color-red-100`, `--color-red-200`, `--color-red-300`, `--color-red-600`, `--color-red-700`, `--color-red-800`, `--color-red-900`, `--color-red-950`, `--color-cyan-100`, `--color-cyan-200`, `--color-cyan-300`, `--color-cyan-800`, `--color-cyan-900`, `--color-cyan-950`, `--color-navy-100`, `--color-navy-200`, `--color-navy-300`, `--color-navy-400`, `--color-navy-600`, `--color-navy-700`, `--color-navy-800`, `--color-navy-850`, `--color-navy-900`, `--color-navy-950`