> ## Documentation Index
> Fetch the complete documentation index at: https://docs.calmtreasury.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling

> Theme the Calm onramp with CSS variables.

The SDK ships a single stylesheet — import it once at your app
root:

```tsx theme={null}
import "@calm-xyz/react/styles.css";
```

Every visual token is a CSS variable scoped under `.calm-root`.
Override on any ancestor (or globally) to retheme — copy the full
default block below and edit what you want:

```css theme={null}
.calm-root {
  --calm-popover: 0 0% 100%;
  --calm-popover-foreground: 240 10% 3.9%;
  --calm-primary: 217 100% 65%;
  --calm-primary-foreground: 0 0% 100%;
  --calm-secondary: 190 27% 82% / 0.35;
  --calm-secondary-foreground: 240 5.9% 10%;
  --calm-muted: 160 13% 86%;
  --calm-muted-foreground: 240 3.8% 46.1%;
  --calm-accent: 212 100% 86%;
  --calm-accent-foreground: 240 5.9% 10%;
  --calm-destructive: 0 84.2% 60.2%;
  --calm-destructive-foreground: 0 0% 100%;
  --calm-success: 142 71% 38%;
  --calm-success-foreground: 0 0% 100%;
  --calm-border: 160 13% 85%;
  --calm-input: 160 13% 85%;
  --calm-ring: 217 100% 65%;
  --calm-overlay: 215 19% 35% / 0.24;
  --calm-radius: 0.5rem;
  --calm-font-sans:
    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;
  --calm-shadow-edge: inset 0 0 0 1px hsl(var(--calm-border) / 0.6);
  --calm-shadow-modal:
    0 0 0 1px hsl(0 0% 0% / 0.04),
    0 8px 30px hsl(0 0% 0% / 0.10);
  --calm-shadow-badge:
    0 0 0 0.5px hsl(var(--calm-border) / 0.6),
    0 1px 2px hsl(0 0% 0% / 0.12);
}
```

Colors are HSL **space-separated triples** (Tailwind v4 convention) —
`217 100% 65%`, not `#4B90FF`. The SDK wraps them with `hsl(...)` at
use-time so opacity modifiers work (`hsl(var(--calm-primary) / 0.5)`).

## Color tokens

The SDK ships light-only — see [Dark mode](#dark-mode) for how to
override tokens inside a dark-themed ancestor.

| Variable                        | Default              | What it paints                         |
| ------------------------------- | -------------------- | -------------------------------------- |
| `--calm-popover`                | `0 0% 100%`          | Modal surface                          |
| `--calm-popover-foreground`     | `240 10% 3.9%`       | Body text on `popover`                 |
| `--calm-primary`                | `217 100% 65%`       | Primary CTA, accents (Calm blue)       |
| `--calm-primary-foreground`     | `0 0% 100%`          | Text on `primary`                      |
| `--calm-secondary`              | `190 27% 82% / 0.35` | Secondary buttons, list rows           |
| `--calm-secondary-foreground`   | `240 5.9% 10%`       | Text on `secondary`                    |
| `--calm-muted`                  | `160 13% 86%`        | Muted surfaces, disabled chips         |
| `--calm-muted-foreground`       | `240 3.8% 46.1%`     | Helper text, captions                  |
| `--calm-accent`                 | `212 100% 86%`       | Highlighted menu rows (Icy Blue)       |
| `--calm-accent-foreground`      | `240 5.9% 10%`       | Text on `accent`                       |
| `--calm-destructive`            | `0 84.2% 60.2%`      | Error states, destructive actions      |
| `--calm-destructive-foreground` | `0 0% 100%`          | Text on `destructive`                  |
| `--calm-success`                | `142 71% 38%`        | Settled-state indicators, check badges |
| `--calm-success-foreground`     | `0 0% 100%`          | Text on `success`                      |
| `--calm-border`                 | `160 13% 85%`        | Default border color                   |
| `--calm-input`                  | `160 13% 85%`        | Input borders                          |
| `--calm-ring`                   | `217 100% 65%`       | Focus ring color                       |
| `--calm-overlay`                | `215 19% 35% / 0.24` | Modal backdrop                         |

## Layout

| Variable        | Default  | What it controls                                                                                                                                    |
| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--calm-radius` | `0.5rem` | Base corner radius (buttons, cards). Other steps slide with it: `xs = base ÷ 16`, `sm = base ÷ 8`, `md = base ÷ 2`, `lg = base`, `xl = base × 1.5`. |
| `--spacing`     | `0.2rem` | Base spacing unit — every gap, padding, and margin is a multiple of it. Lower it for a denser modal, raise it for more breathing room.              |

## Typography

| Variable           | Default                                                                         | What it controls                                                                               |
| ------------------ | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| `--calm-font-sans` | `"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif` | The whole modal's font stack. Load Geist (or any font in the stack) yourself on the host page. |
| `--text-xs`        | `13px`                                                                          | Captions, helper text                                                                          |
| `--text-sm`        | `15px`                                                                          | Body, labels, button text                                                                      |
| `--text-base`      | `18px`                                                                          | Modal titles, section headings                                                                 |

`--spacing` and the `--text-*` sizes are Tailwind theme variables (no
`calm-` prefix), but you override them the same way — set them on
`.calm-root` or any ancestor.

## Shadows

| Variable              | Default                                                                    | What it paints                                     |
| --------------------- | -------------------------------------------------------------------------- | -------------------------------------------------- |
| `--calm-shadow-edge`  | `inset 0 0 0 1px hsl(var(--calm-border) / 0.6)`                            | 1px inset edge ring on round logos / cards         |
| `--calm-shadow-modal` | `0 0 0 1px hsl(0 0% 0% / 0.04), 0 8px 30px hsl(0 0% 0% / 0.10)`            | Modal drop shadow                                  |
| `--calm-shadow-badge` | `0 0 0 0.5px hsl(var(--calm-border) / 0.6), 0 1px 2px hsl(0 0% 0% / 0.12)` | Hairline + soft drop on an overlapping chain badge |

## Dark mode

The SDK ships light-only. Override tokens inside any dark-themed
ancestor — via a `data-theme="dark"` selector, a media query, or a
provider you already control:

```css theme={null}
[data-theme="dark"] .calm-root {
  --calm-popover: 240 10% 3.9%;
  --calm-popover-foreground: 0 0% 100%;
  --calm-border: 240 3.7% 15.9%;
  --calm-muted: 240 3.7% 15.9%;
  /* ...etc */
}
```

## Scoping

The SDK uses Tailwind v4 with a `calm:` prefix, scoped under
`.calm-root`. That means:

* Every internal utility class ships as `calm:bg-primary` (not
  `bg-primary`) — no collision with your app's Tailwind utilities.
* Tailwind's `preflight` is skipped — the SDK's reset is scoped under
  `.calm-root` via `:where()` so it never touches the host page's
  typography or box-sizing.
* Custom Tailwind tokens (`--text-xs: 13px`, tighter `--spacing: 0.2rem`)
  apply only inside `.calm-root`.

You don't need to apply `.calm-root` yourself — the modal's portal
container adds it.