Theme

Cada componente de Fancy Etch lee del mismo conjunto de tokens compartido, aportado por el framework base que hayas elegido en Requisitos previos (Fancy Framework o ACSS 4). Estos son los tokens con los que viene Fancy Framework — tanto quien crea componentes como quien crea plantillas debería usar estos en vez de escribir un valor crudo a mano.

Escala de espaciado

Fluida, basada en clamp() — cada token escala suavemente entre un valor móvil y uno de escritorio en vez de saltar en un breakpoint.

Token	Rango (móvil → escritorio)
--space-xs	0.56rem → 0.69rem
--space-s	0.81rem → 1rem
--space-m	1.25rem → 1.5rem
--space-l	1.88rem (fijo)
--space-xl	2.81rem → 3.38rem
--space-xxl	2.81rem → 5.06rem
--space-section	6.25rem → 7.5rem

Tokens de espaciado derivados de la escala anterior: --grid-gap, --grid-gap-s, --card-gap, --card-padding, --content-gap, --container-gap, --padding-section.

Escala tipográfica

También fluida. Tokens de texto de cuerpo:

Token	Rango
--text-xs	0.63rem → 0.75rem
--text-s	0.81rem → 0.88rem
--text-m	1rem → 1.13rem
--text-mm	1.13rem → 1.25rem
--text-l	1.25rem → 1.44rem
--text-xl	1.56rem → 1.75rem
--text-xxl	1.94rem → 2.19rem

Tokens de heading:

Token	Rango
--h1	2.75rem → 3.44rem
--h2	2.19rem → 2.75rem
--h3	1.75rem → 2.19rem
--h4	1.38rem → 1.75rem
--h5	1.13rem → 1.38rem
--h6	0.88rem → 1.13rem

Peso y color se fijan una sola vez y se heredan en todas partes: --text-font-weight (400), --heading-font-weight (600), --text-color, --heading-color — los componentes referencian --heading-color en vez de depender de la herencia, así que un skin de variante oscura solo necesita sobreescribir esa única variable (ver el skin oscuro del Acordeón como ejemplo concreto de este patrón).

Color

Fancy Etch espera una familia de color primary, secondary y base, cada una con sus tonos — light, ultra-light, dark, ultra-dark, etc. (ej. --primary, --primary-light, --base-ultra-dark) — además de --white. La paleta exacta depende de cada proyecto: se define una vez en tu framework y todos los componentes la recogen automáticamente.

Transparencias

ACSS 4 no tiene variables de colores transparentes, así que Fancy Etch no depende de ellas. Un color transparente es el propio color del framework mezclado con transparent:

color-mix(in oklch, var(--base-ultra-dark) 60%, transparent)

El porcentaje es cuánto queda del color — 60% es ese color al 60 % de opacidad. Funciona igual con Fancy Framework y con ACSS 4, y un velo hecho así sigue a la paleta cuando cambia la marca.

Nota

Las variables -trans- de Fancy Framework

Fancy Framework trae además transparencias ya hechas — --primary-trans-20, --base-ultra-dark-trans-60, --white-trans-40 y similares. Valen en un proyecto que sólo use Fancy Framework, pero lo que tenga que funcionar también con ACSS 4 debe usar color-mix().

Forma

• --radius — radio de esquina base (20px por defecto), con --radius-inside (0.5×) y --radius-outside (1.4×) derivados de él para elementos anidados/contenedores.
• --btn-radius — totalmente redondeado por defecto (999px).

Breakpoints responsivos

Fancy Etch es mobile-first: el CSS base apunta al viewport más pequeño, y las container queries @custom-media añaden overrides encima para pantallas más grandes — lo inverso de un enfoque desktop-first. La lista completa de tokens de breakpoint vive en la página de Inicio rápido.