import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';

<Meta title="Brand/Isotipo/Cuadrados" />

<Title>Cuadrados</Title>
<Subtitle>Second mark in the Xertica isotipos series: two overlapping hollow squares.</Subtitle>

---

## Overview

`Cuadrados` renders two overlapping hollow square frames in fixed brand colors. Their intersection blends into a third color purely from SVG stroke opacity — no third color is ever hardcoded, it's a rendering side-effect.

```tsx
import { Cuadrados } from 'xertica-ui/brand';

<Cuadrados variant="blue-magenta" className="w-64" />
```

---

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `variant` | `CuadradosVariantId` | `'blue-magenta'` | Which registered color pair to render. |
| `className` | `string` | — | Additional classes on the root — use for sizing (`w-64`, `max-w-md`, etc). `aspect-square` is built in. |
| `aria-label` | `string` | — | Omit for decorative use (root gets `aria-hidden`); set it to render as `role="img"` instead. |

---

## Variants

The registry (`CUADRADOS_VARIANTS` in `cuadrados-variants.ts`) holds ordered `[back, front]` color pairs — the front (second) color is painted on top and dominates the intersection blend. Add a new color combination by adding an entry there and widening `CuadradosVariantId`; `Cuadrados.tsx` itself never needs to change.

```tsx
import { CUADRADOS_VARIANT_IDS, Cuadrados } from 'xertica-ui/brand';

CUADRADOS_VARIANT_IDS.map(variant => <Cuadrados key={variant} variant={variant} />);
```

---

## AI Best Practices

> [!IMPORTANT]
> - **Colors are fixed brand hex values, not theme tokens** — same rule as every isotype mark: never replace `ISOTYPE_COLORS` with CSS custom properties.
> - **The intersection color is derived, not data** — it comes from stroke opacity compositing; never hardcode a third color per variant.
> - **New color pairs are data, not components** — add variants via `CUADRADOS_VARIANTS`/`CuadradosVariantId` in `cuadrados-variants.ts`.
> - **Pair order controls the blend** — `[back, front]`, the front color dominates the intersection.