@cascivo/mcp 0.2.0 → 0.3.4

package/dist/context/popover.md

@@ -0,0 +1,108 @@
+# Popover
+
+**Category:** overlay  
+**Description:** Anchored floating panel built on CSS Anchor Positioning + Popover API
+
+## When to use
+
+- Showing rich, interactive content anchored to a trigger that the user must explicitly open by clicking
+- Lightweight transient panels (forms, pickers, detail cards) that do not need to block the rest of the page
+
+## When NOT to use
+
+- A short, non-interactive text hint on hover/focus — use Tooltip
+- A task that must capture focus and block interaction with the page — use Modal
+- Preview content revealed on hover without a click — use HoverCard
+
+## Anti-patterns
+
+### Tooltips are non-interactive and hover-driven; interactive content needs a click-opened dialog popover that users can move focus into
+
+**Bad:** `<Tooltip content={<form>...</form>}>`  
+**Good:** `<Popover><PopoverTrigger>…</PopoverTrigger><PopoverContent><form>…</form></PopoverContent></Popover>`  
+**Why:** Tooltips are non-interactive and hover-driven; interactive content needs a click-opened dialog popover that users can move focus into
+
+## Related components
+
+- **Tooltip** (alternative): Use for brief non-interactive hints, not interactive content
+- **HoverCard** (alternative): Use when the panel should open on hover rather than click
+- **Modal** (alternative): Use when the overlay must be blocking and focus-trapping
+
+## Accessibility rationale
+
+The trigger is a real <button> with aria-haspopup="dialog" and aria-expanded reflecting open state, and the panel uses role="dialog" via the native Popover API so Escape-to-close and light-dismiss come from the platform rather than custom handlers.
+
+## Props
+
+| Name           | Type                                     | Required | Default | Description                                      |
+| -------------- | ---------------------------------------- | -------- | ------- | ------------------------------------------------ |
+| `children`     | `React.ReactNode`                        | Yes      | —       | A PopoverTrigger and PopoverContent pair.        |
+| `open`         | `boolean`                                | No       | —       | Whether the component is open (controlled).      |
+| `onOpenChange` | `(open: boolean) => void`                | No       | —       | Called with the next open state when it changes. |
+| `placement`    | `'top' \| 'bottom' \| 'left' \| 'right'` | No       | bottom  | Placement relative to the trigger.               |
+| `offset`       | `number`                                 | No       | 4       | Distance (px) between the trigger and the panel. |
+
+## Tokens
+
+- `--cascivo-color-surface`
+- `--cascivo-color-border`
+- `--cascivo-radius-md`
+- `--cascivo-shadow-md`
+- `--cascivo-motion-enter`
+- `--cascivo-motion-exit`
+
+## Examples
+
+### Basic
+
+```jsx
+<Popover>
+  <PopoverTrigger>Open settings</PopoverTrigger>
+  <PopoverContent>
+    <form>…</form>
+  </PopoverContent>
+</Popover>
+```
+
+### Controlled with placement
+
+```jsx
+<Popover open={isOpen} onOpenChange={setIsOpen} placement="top">
+  <PopoverTrigger>Filters</PopoverTrigger>
+  <PopoverContent>
+    <FilterForm />
+  </PopoverContent>
+</Popover>
+```
+
+## Boundaries
+
+| Area        | Level    | Note                                                                      |
+| ----------- | -------- | ------------------------------------------------------------------------- |
+| token names | strict   | Panel styling must resolve to the listed --cascivo-\* tokens              |
+| content     | flexible | Trigger and panel content are arbitrary children supplied by the consumer |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo Popover component (overlay). Anchored floating panel built on CSS Anchor Positioning + Popover API
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+Popover is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-surface, --cascivo-color-border, --cascivo-radius-md, --cascivo-shadow-md, --cascivo-motion-enter, --cascivo-motion-exit
+
+Accessibility: role "dialog", WCAG 2.2-AA, keyboard: Escape. Keep it AA.
+
+Do not change (strict): token names — Panel styling must resolve to the listed --cascivo-* tokens
+Flexible: content.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/progress-bar.md

@@ -0,0 +1,107 @@
+# ProgressBar
+
+**Category:** feedback  
+**Description:** Shows determinate or indeterminate progress of a task
+
+## When to use
+
+- Showing linear determinate progress of a task with a known percentage (value)
+- Indicating ongoing work of unknown duration (omit value for indeterminate)
+- Reflecting success/error outcome of a tracked operation (status)
+
+## When NOT to use
+
+- A compact circular indicator is preferred — use ProgressCircle
+- Pure indeterminate spinning with no track — use Spinner
+- Stepping through a multi-step flow — use ProgressIndicator
+
+## Anti-patterns
+
+### A determinate bar implies a meaningful percentage; faking it misleads the user
+
+**Bad:** `A determinate ProgressBar with a faked, jumping value`  
+**Good:** `Omit value for an indeterminate bar when real progress is unknown`  
+**Why:** A determinate bar implies a meaningful percentage; faking it misleads the user
+
+## Related components
+
+- **ProgressCircle** (alternative): Circular form for compact determinate progress
+- **Spinner** (alternative): Spinner for indeterminate work with no track
+
+## Accessibility rationale
+
+role="progressbar" with value/max exposes completion to assistive tech; the label is wired via aria-labelledby and success/error states add a glyph so outcome is not color-only
+
+## Props
+
+| Name         | Type                               | Required | Default | Description                                                    |
+| ------------ | ---------------------------------- | -------- | ------- | -------------------------------------------------------------- |
+| `value`      | `number`                           | No       | —       | Current value from 0 to max; omit for an indeterminate bar     |
+| `max`        | `number`                           | No       | 100     | Maximum allowed value.                                         |
+| `label`      | `string`                           | No       | —       | Visible label above the track, wired via aria-labelledby       |
+| `helperText` | `string`                           | No       | —       | Supplementary text shown with the progress bar.                |
+| `size`       | `'sm' \| 'md'`                     | No       | md      | Visual size of the component (e.g. 'sm', 'md', 'lg').          |
+| `status`     | `'active' \| 'success' \| 'error'` | No       | active  | success/error tint the fill and show a glyph next to the label |
+
+## Tokens
+
+- `--cascivo-color-accent`
+- `--cascivo-color-success`
+- `--cascivo-color-destructive`
+- `--cascivo-color-border`
+- `--cascivo-color-text`
+- `--cascivo-color-text-subtle`
+- `--cascivo-radius-full`
+- `--cascivo-motion-enter`
+
+## Examples
+
+### Determinate
+
+```jsx
+<ProgressBar value={60} label="Uploading" />
+```
+
+### Indeterminate
+
+```jsx
+<ProgressBar label="Processing" />
+```
+
+### Success
+
+```jsx
+<ProgressBar value={100} status="success" label="Upload complete" />
+```
+
+## Boundaries
+
+| Area                         | Level    | Note                                                       |
+| ---------------------------- | -------- | ---------------------------------------------------------- |
+| determinate vs indeterminate | flexible | Presence of value selects the mode                         |
+| token names                  | strict   | Fill and status colors must resolve to --cascivo-\* tokens |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo ProgressBar component (feedback). Shows determinate or indeterminate progress of a task
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+ProgressBar is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-accent, --cascivo-color-success, --cascivo-color-destructive, --cascivo-color-border, --cascivo-color-text, --cascivo-color-text-subtle, --cascivo-radius-full, --cascivo-motion-enter
+
+Accessibility: role "progressbar", WCAG 2.2-AA. Keep it AA.
+
+Do not change (strict): token names — Fill and status colors must resolve to --cascivo-* tokens
+Flexible: determinate vs indeterminate.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/progress-circle.md

@@ -0,0 +1,101 @@
+# ProgressCircle
+
+**Category:** feedback  
+**Description:** Circular determinate progress indicator rendered as an SVG arc
+
+## When to use
+
+- Showing determinate progress compactly as a circular arc
+- Displaying a percentage in a small footprint (showValue)
+- Tracking completion against a custom maximum (max)
+
+## When NOT to use
+
+- Indeterminate work with no known value — use Spinner
+- Full-width linear progress with a label and helper text — use ProgressBar
+- Multi-step flows — use ProgressIndicator
+
+## Anti-patterns
+
+### ProgressCircle requires a determinate value; it cannot express unknown progress
+
+**Bad:** `Using ProgressCircle for indeterminate loading`  
+**Good:** `<Spinner> for indeterminate states`  
+**Why:** ProgressCircle requires a determinate value; it cannot express unknown progress
+
+## Related components
+
+- **ProgressBar** (alternative): Linear form with labels and indeterminate support
+- **Spinner** (alternative): Indeterminate alternative when value is unknown
+
+## Accessibility rationale
+
+role="progressbar" with value/max conveys completion to assistive tech; the label prop supplies an accessible name since the SVG arc alone carries no text
+
+## Props
+
+| Name        | Type                   | Required | Default | Description                                                              |
+| ----------- | ---------------------- | -------- | ------- | ------------------------------------------------------------------------ |
+| `value`     | `number`               | Yes      | —       | Current value from 0 to max — clamped                                    |
+| `max`       | `number`               | No       | 100     | Maximum allowed value.                                                   |
+| `size`      | `'sm' \| 'md' \| 'lg'` | No       | md      | Visual size of the component (e.g. 'sm', 'md', 'lg').                    |
+| `showValue` | `boolean`              | No       | false   | Renders the rounded percentage in the center — pairs best with md and lg |
+| `label`     | `string`               | No       | —       | Accessible name announced by screen readers                              |
+
+## Tokens
+
+- `--cascivo-color-border`
+- `--cascivo-color-accent`
+- `--cascivo-color-text`
+
+## Examples
+
+### Default
+
+```jsx
+<ProgressCircle value={40} label="Loading" />
+```
+
+### With value
+
+```jsx
+<ProgressCircle value={72} showValue size="lg" label="Upload progress" />
+```
+
+### Custom max
+
+```jsx
+<ProgressCircle value={3} max={8} label="Steps completed" />
+```
+
+## Boundaries
+
+| Area               | Level    | Note                                                     |
+| ------------------ | -------- | -------------------------------------------------------- |
+| size and showValue | flexible | showValue pairs best with md/lg sizes                    |
+| token names        | strict   | Arc and track colors must resolve to --cascivo-\* tokens |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo ProgressCircle component (feedback). Circular determinate progress indicator rendered as an SVG arc
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+ProgressCircle is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-border, --cascivo-color-accent, --cascivo-color-text
+
+Accessibility: role "progressbar", WCAG 2.2-AA. Keep it AA.
+
+Do not change (strict): token names — Arc and track colors must resolve to --cascivo-* tokens
+Flexible: size and showValue.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/progress-indicator.md

@@ -0,0 +1,105 @@
+# ProgressIndicator
+
+**Category:** navigation  
+**Description:** Shows progress through the steps of a multi-step flow
+
+## When to use
+
+- Showing progress through the discrete steps of a multi-step flow (wizard, checkout)
+- Communicating which step is complete, current, and upcoming
+- Laying out steps horizontally or vertically with optional descriptions
+
+## When NOT to use
+
+- Continuous task progress with a percentage — use ProgressBar or ProgressCircle
+- Indeterminate loading — use Spinner
+
+## Anti-patterns
+
+### ProgressIndicator models discrete steps, not a continuous quantity
+
+**Bad:** `Using ProgressIndicator to show a download percentage`  
+**Good:** `<ProgressBar value={pct}> for continuous progress`  
+**Why:** ProgressIndicator models discrete steps, not a continuous quantity
+
+## Related components
+
+- **ProgressBar** (alternative): ProgressBar shows continuous progress; this shows discrete steps
+
+## Accessibility rationale
+
+role="list" structures the steps in order; the current step is conveyed as text/state rather than color alone, so screen-reader users know where they are in the flow
+
+## Props
+
+| Name           | Type                                        | Required | Default | Description                                              |
+| -------------- | ------------------------------------------- | -------- | ------- | -------------------------------------------------------- |
+| `steps`        | `{ label: string; description?: string }[]` | Yes      | —       | Ordered list of steps                                    |
+| `currentIndex` | `number`                                    | Yes      | —       | Index of the current step (0-based)                      |
+| `vertical`     | `boolean`                                   | No       | false   | When true, lays the steps out vertically.                |
+| `className`    | `string`                                    | No       | —       | Additional CSS class names merged onto the root element. |
+
+## Tokens
+
+- `--cascivo-color-accent`
+- `--cascivo-color-accent-subtle`
+- `--cascivo-color-text`
+- `--cascivo-color-text-muted`
+- `--cascivo-color-text-subtle`
+- `--cascivo-color-text-on-accent`
+- `--cascivo-color-border`
+- `--cascivo-color-surface`
+- `--cascivo-radius-full`
+
+## Examples
+
+### Horizontal
+
+```jsx
+<ProgressIndicator
+  steps={[{ label: 'Cart' }, { label: 'Shipping' }, { label: 'Payment' }]}
+  currentIndex={1}
+/>
+```
+
+### Vertical with descriptions
+
+```jsx
+<ProgressIndicator
+  vertical
+  steps={[{ label: 'Account', description: 'Your details' }, { label: 'Confirm' }]}
+  currentIndex={0}
+/>
+```
+
+## Boundaries
+
+| Area        | Level    | Note                                                          |
+| ----------- | -------- | ------------------------------------------------------------- |
+| orientation | flexible | horizontal or vertical to fit the layout                      |
+| token names | strict   | Step and connector colors must resolve to --cascivo-\* tokens |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo ProgressIndicator component (navigation). Shows progress through the steps of a multi-step flow
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+ProgressIndicator is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-accent, --cascivo-color-accent-subtle, --cascivo-color-text, --cascivo-color-text-muted, --cascivo-color-text-subtle, --cascivo-color-text-on-accent, --cascivo-color-border, --cascivo-color-surface, --cascivo-radius-full
+
+Accessibility: role "list", WCAG 2.2-AA. Keep it AA.
+
+Do not change (strict): token names — Step and connector colors must resolve to --cascivo-* tokens
+Flexible: orientation.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/progress.md

@@ -0,0 +1,109 @@
+# Progress
+
+**Category:** feedback  
+**Description:** Horizontal bar showing the completion progress of a tracked operation
+
+## When to use
+
+- Tracked operations with a known total (file uploads, multi-step imports)
+- Showing completion percentage of a long-running task
+
+## When NOT to use
+
+- Unbounded waits of unknown duration — use Spinner
+- Single-action button loading state — use the button's own loading prop
+
+## Anti-patterns
+
+### Indeterminate progress bars must have an aria-label so screen readers can announce what is loading
+
+**Bad:** `<Progress />`  
+**Good:** `<Progress aria-label="Uploading file…" />`  
+**Why:** Indeterminate progress bars must have an aria-label so screen readers can announce what is loading
+
+## Related components
+
+- **Spinner** (alternative): Spinner is for unbounded waits; Progress is for operations with a known end point
+- **ProgressBar** (alternative): ProgressBar is the richer compound variant with label and percentage display
+
+## Accessibility rationale
+
+Uses the native <progress> element which maps to role="progressbar" automatically; aria-label or aria-labelledby is required for indeterminate state
+
+## Props
+
+| Name      | Type                                                       | Required | Default | Description                                           |
+| --------- | ---------------------------------------------------------- | -------- | ------- | ----------------------------------------------------- |
+| `value`   | `number`                                                   | No       | —       | 0–100. Omit for indeterminate state.                  |
+| `variant` | `'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | No       | primary | Selects the visual style variant.                     |
+| `size`    | `'sm' \| 'md' \| 'lg'`                                     | No       | md      | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
+
+## Tokens
+
+- `--cascivo-color-surface-2`
+- `--cascivo-color-primary`
+- `--cascivo-color-info`
+- `--cascivo-color-success`
+- `--cascivo-color-warning`
+- `--cascivo-color-error`
+- `--cascivo-color-accent`
+- `--cascivo-radius-full`
+- `--cascivo-ease-out`
+
+## Examples
+
+### Determinate
+
+```jsx
+<Progress value={65} />
+```
+
+### Indeterminate
+
+```jsx
+<Progress aria-label="Loading…" />
+```
+
+### Success variant
+
+```jsx
+<Progress value={100} variant="success" />
+```
+
+### Small
+
+```jsx
+<Progress value={40} size="sm" />
+```
+
+## Boundaries
+
+| Area        | Level    | Note                                                                  |
+| ----------- | -------- | --------------------------------------------------------------------- |
+| variant     | flexible | Choose the variant that matches the semantic meaning of the operation |
+| token names | strict   | Colors must resolve to --cascivo-\* tokens                            |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo Progress component (feedback). Horizontal bar showing the completion progress of a tracked operation
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+Progress is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-surface-2, --cascivo-color-primary, --cascivo-color-info, --cascivo-color-success, --cascivo-color-warning, --cascivo-color-error, --cascivo-color-accent, --cascivo-radius-full, --cascivo-ease-out
+
+Accessibility: role "progressbar", WCAG 2.2-AA. Keep it AA.
+
+Do not change (strict): token names — Colors must resolve to --cascivo-* tokens
+Flexible: variant.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/prose.md

@@ -0,0 +1,110 @@
+# Prose
+
+**Category:** display  
+**Description:** Wrapper that styles raw descendant HTML — headings, lists, code, quotes, tables
+
+## When to use
+
+- Styling long-form authored content (articles, docs, CMS output)
+- Applying readable typography to raw HTML you do not control (markdown pipelines)
+- Getting consistent spacing for headings, lists, code, and quotes in one wrapper
+
+## When NOT to use
+
+- Single typographic elements in app UI — use Heading, Text, or List directly
+- Interactive component layouts — Prose only styles flow content
+
+## Anti-patterns
+
+### Prose restyles all descendant HTML, which clobbers component styling and intent
+
+**Bad:** `Wrapping app UI (buttons, forms) in <Prose> for spacing`  
+**Good:** `Use layout primitives; reserve Prose for authored document content`  
+**Why:** Prose restyles all descendant HTML, which clobbers component styling and intent
+
+## Related components
+
+- **Heading** (alternative): Use Heading/Text directly in app UI; Prose handles authored content
+
+## Accessibility rationale
+
+Adds no roles of its own — it styles descendant native elements, so the document semantics of the underlying HTML (headings, lists, code) are preserved for assistive tech
+
+## Props
+
+| Name                      | Type                 | Required | Default | Description                                                                 |
+| ------------------------- | -------------------- | -------- | ------- | --------------------------------------------------------------------------- |
+| `children`                | `React.ReactNode`    | No       | —       | Authored flow content (headings, paragraphs, lists, code, tables) to style. |
+| `dangerouslySetInnerHTML` | `{ __html: string }` | No       | —       | Rendered HTML you do not control (CMS, markdown pipelines). Sanitize first. |
+| `className`               | `string`             | No       | —       | Additional CSS class names merged onto the root element.                    |
+
+## Tokens
+
+- `--cascivo-font-sans`
+- `--cascivo-font-mono`
+- `--cascivo-font-semibold`
+- `--cascivo-leading-tight`
+- `--cascivo-leading-relaxed`
+- `--cascivo-tracking-tight`
+- `--cascivo-color-text`
+- `--cascivo-color-text-subtle`
+- `--cascivo-color-accent`
+- `--cascivo-color-accent-hover`
+- `--cascivo-color-surface`
+- `--cascivo-color-border`
+- `--cascivo-color-border-strong`
+- `--cascivo-radius-indicator`
+- `--cascivo-radius-surface`
+
+## Examples
+
+### Authored content
+
+```jsx
+<Prose>
+  <h2>Install</h2>
+  <p>
+    Run <code>npx cascivo init</code>.
+  </p>
+</Prose>
+```
+
+### Rendered markdown
+
+The use case: HTML you do not control (CMS, markdown pipelines)
+
+```jsx
+<Prose dangerouslySetInnerHTML={{ __html: html }} />
+```
+
+## Boundaries
+
+| Area        | Level    | Note                                                               |
+| ----------- | -------- | ------------------------------------------------------------------ |
+| source HTML | flexible | Accepts authored children or rendered markup                       |
+| token names | strict   | All typography and surface styling resolves to --cascivo-\* tokens |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo Prose component (display). Wrapper that styles raw descendant HTML — headings, lists, code, quotes, tables
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+Prose is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-font-sans, --cascivo-font-mono, --cascivo-font-semibold, --cascivo-leading-tight, --cascivo-leading-relaxed, --cascivo-tracking-tight, --cascivo-color-text, --cascivo-color-text-subtle, --cascivo-color-accent, --cascivo-color-accent-hover, --cascivo-color-surface, --cascivo-color-border, --cascivo-color-border-strong, --cascivo-radius-indicator, --cascivo-radius-surface
+
+Accessibility: role "generic", WCAG 2.2-AA. Keep it AA.
+
+Do not change (strict): token names — All typography and surface styling resolves to --cascivo-* tokens
+Flexible: source HTML.
+
+Do not invent props, tokens, or global viewport media queries.
+```